javascript - 有没有办法在脚本 document.write(''); 中写入文本？成多行？

Question

我目前正在做一个静态网站，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 的替代方案吗？

非常感谢！

标签： javascripthtmlcss

Answer 1

您可以在 document.write 中使用 \n 输出换行符：

document.write("line1\nline2");

您还可以使用多行字符串：

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

希望这可以帮助。