Je suis actuellement en train de créer un site Web statique et le document.write(''); + <script type="text/javascript" src="files\includes\html\"></script> est vraiment important pour économiser beaucoup d'espace.

Je ne connais pas grand chose aux autres langages et pas assez bien en JS, mais c'est une façon de tourner

CETTE

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

DANS QUELQUE CHOSE COMME CECI (fichier externe qui sera appelé)

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

J'en ai besoin pour que ces textes puissent encore être facilement lus et édités si nécessaire. Je sais que je peux faire plusieurs document.write dans un seul fichier .js, mais je ne préfère pas vraiment faire ça.

Quelqu'un peut-il me dire une alternative en utilisant uniquement html et javascript?

Merci beaucoup!

3
The Author 17 juin 2020 à 05:19

4 réponses

Meilleure réponse

Je pense que cela le résoudra, utiliser la fonction pour créer HTMLElement est pratique

/**
 * @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 je vous suggère d'utiliser appendChild pour ajouter HTMLElement:

function appendNode(Element) {
  document.body.appendChild(Element)
}
1
hhh 17 juin 2020 à 03:09

Vous pouvez générer un saut de ligne en utilisant \ n dans votre document.write:

document.write("line1\nline2");

Vous pouvez également utiliser des chaînes multilignes:

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

J'espère que cela t'aides.

4
Lennart Steinke 17 juin 2020 à 02:22

Vous pouvez utiliser une chaîne multiligne en incorporant la chaîne dans

''

Citations comme ceci:

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);
1
MuhammadUmarFarooq 17 juin 2020 à 03:30

Cela pourrait dépendre de votre éditeur de texte également par exemple sur Visual Studio Code vous pouvez facilement le faire en appuyant sur Alt+Z J'ai beaucoup travaillé avec le format svg et j'en avais beaucoup besoin, ça ne le rend pas parfait mais c'est lisible, mais si vous voulez le faire manuellement, vous pouvez également ajouter pour chacun un nouveau document.write cela fonctionne

1
Nairi Areg Hatspanyan 17 juin 2020 à 03:05