Is there a way to write the texts inside a script document.write(''); into multiple lines?

user_13086542 0
Viewed 65

I am currently doing a static website and the document.write(''); + <script type="text/javascript" src="files\includes\html\"></script> is really important to save a lot of space.

I do not know much about other languages and not good enough in JS, but is a way to turn

THIS

//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>`);

INTO SOMETHING LIKE THIS (external file that will be called)

//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>`);

I need this so that these texts can still be easily read and edited if I have to. I know I can do multiple document.write in a single .js file, but I don't really prefer doing that.

Can someone please tell me an alternative using only html and javascript?

Thanks a lot!

css html javascript
4 Answers

You can output a linebreak using \n in your document.write:

document.write("line1\nline2");

you can also use multiline strings:

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

Hope this helps.

user_132086740

i think it will solve it, using function to create HTMLElement is convenient 

/**
 * @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)

anb i suggest you use appendChild to add HTMLElement:

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

It could depend on your text editor also for example on Visual Studio Code you can easily do it by pressing Alt+Z I worked a lot with svg format and I needed it a lot, it isn't making it perfect but it is readable, but if you want to do it manually you could also add for each a new document.write it works

user_135680990

You can use multi-line string by embedding the string in

``

quotes like this:

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);
user_73441640
Related