Есть ли способ записать тексты внутри скрипта document.write (''); в несколько строк?

Question

В настоящее время я делаю сайт stati c, и document.write(''); + <script type="text/javascript" src="files\includes\html\"></script> действительно важен для экономии места.

Я мало знаю о других языках и недостаточно хорошо разбираюсь в JS, но это способ превратить

ЭТО

//Andrew Roberts
document.write(`<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1xFsg02bKCDykbYQocnJAkvI4C4SMztoq?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1396671960l/20821092.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/13o5_SD48IyZ4wmwVrW8XVyJNtH2gPslr?usp=sharing"><img src="https://cdn.waterstones.com/bookjackets/large/9780/1410/9780141032016.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1vnrsBj3SNfenKN1dqZRLBpzU_LTe3WeR?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1348680574l/144175.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/15ODpIDp0SdW95FlJOMnte6szstBQglWs?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1407107697l/148930.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1g2pI9I9tR-eytpeV1notYKXLaP7caB8H?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1328859807l/863961.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/14Xj5Jieg3c0FOXa2cdbhq8lXyzwFFKyz?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1328030874l/6065741.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1M6DdW8IsZ_ayPauUlYZgFcRJ5MGjnigJ?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1532427913l/38470102.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1RCQnIN7hOyqzn_Aua-WGjC9DskeIMHWx?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1550119148l/43982424.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1SdcfanrJvMuZMURjCbjUG0r5xws9p8aS?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1348891928l/9850339.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1ev1mvdGWWuiVtrjs2OIC0GqkFXL-mThZ?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1387668460l/90233.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1zIsHkGeHQxgnWvgb2vrXDLgZJBOEEZ6Q?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1187691222l/1746921.jpg" class="img-fluid rounded shadow-sm"></a></div><div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1Ibf62_ne37ACvF1sipsHZaJfi0SuOeo7?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1377629574l/18112183.jpg" class="img-fluid rounded shadow-sm"></a></div>`);

В ЧТО-ТО ПОДОБНОЕ ( внешний файл, который будет вызван)

//Andrew Roberts
document.write(`

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1xFsg02bKCDykbYQocnJAkvI4C4SMztoq?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1396671960l/20821092.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/13o5_SD48IyZ4wmwVrW8XVyJNtH2gPslr?usp=sharing"><img src="https://cdn.waterstones.com/bookjackets/large/9780/1410/9780141032016.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1vnrsBj3SNfenKN1dqZRLBpzU_LTe3WeR?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1348680574l/144175.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/15ODpIDp0SdW95FlJOMnte6szstBQglWs?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1407107697l/148930.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1g2pI9I9tR-eytpeV1notYKXLaP7caB8H?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1328859807l/863961.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/14Xj5Jieg3c0FOXa2cdbhq8lXyzwFFKyz?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1328030874l/6065741.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1M6DdW8IsZ_ayPauUlYZgFcRJ5MGjnigJ?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1532427913l/38470102.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1RCQnIN7hOyqzn_Aua-WGjC9DskeIMHWx?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1550119148l/43982424.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1SdcfanrJvMuZMURjCbjUG0r5xws9p8aS?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1348891928l/9850339.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1ev1mvdGWWuiVtrjs2OIC0GqkFXL-mThZ?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1387668460l/90233.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1zIsHkGeHQxgnWvgb2vrXDLgZJBOEEZ6Q?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1187691222l/1746921.jpg" class="img-fluid rounded shadow-sm"></a></div>

<div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1Ibf62_ne37ACvF1sipsHZaJfi0SuOeo7?usp=sharing"><img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1377629574l/18112183.jpg" class="img-fluid rounded shadow-sm"></a></div>`);

Мне это нужно, чтобы эти тексты можно было легко читать и редактировать, если мне нужно. Я знаю, что могу сделать несколько document.write в одном файле. js, но я не особо предпочитаю это делать.

Может кто-нибудь подскажет мне альтернативу, используя только html и javascript ?

Большое спасибо!

Answer 1

Вы можете вывести перенос строки, используя \ n в вашем документе. Write:

document.write("line1\nline2");

вы также можете использовать многострочные строки:

var foo =  `
  <div>
    <p>bar</p>
  </div>
`;

Надеюсь, это поможет.

Answer 2

Вы можете использовать многострочную строку, вставив строку в

``

кавычки, например:

let myScript=`<div class="col-lg-2 
col-md-4 col-4">
<a href="https://somecloud.com/drive/folders/1xFsg02bKCDykbYQocnJAkvI4C4SMztoq?usp=sharing">
<img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1396671960l/20821092.jpg" class="img-fluid rounded shadow-sm">
</a>
</div> `;

document.write(myScript);

Answer 3

Это может зависеть от вашего текстового редактора, например, от Visual Studio Code, вы можете легко сделать это, нажав Alt+Z Я много работал с форматом svg, и он мне очень нужен, это не делает его идеальным, но он читается, но если вы хотите сделать это вручную, вы также можете добавить для каждого нового document.write он работает

Answer 4

я думаю, что это решит, использовать функцию для создания HTMLElement удобно

/**
 * @param {string} tag
 * @param {Object|null} options
 * @param {Array<Object>} children node's children
 */
function createNode(tag, options, children = []) {
  let node = document.createElement(tag)
  for (let i in options) {
    node[i] = options[i]
  };
  children.forEach(v => {
    const { tag, options, children } = v
    node.appendChild(createNode(tag, options, children))
  })
  return node
}
// create node 
//  <div class="col-lg-2 col-md-4 col-4"><a href="https://somecloud.com/drive/folders/1xFsg02bKCDykbYQocnJAkvI4C4SMztoq?usp=sharing">
//  <img src="https://i.ma.com/images/S/compressed.photo.biographies.com/books/1396671960l/20821092.jpg" class="img-fluid rounded shadow-sm"></a>
//  </div>
let nodes = createNode('div', {
  class: 'col-lg-2 col-md-4 col-4'
}, [{
  tag: 'a',
  options: { href: "https://somecloud.com/drive/folders/1xFsg02bKCDykbYQocnJAkvI4C4SMztoq?usp=sharing" },
  children: [{
    tag: 'img', options: { src: "https://i.ma.com/images/S/compressed.photo.biographies.com/books/1396671960l/20821092.jpg", class: "img-fluid rounded shadow-sm" }
  }]
}])

function write(Element) {
  document.write(Element.outerHTML)
}
write(nodes)
console.log(nodes)

и я предлагаю вам использовать appendChild для добавления HTMLElement:

function appendNode(Element) {
  document.body.appendChild(Element)
}