Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<body>
<style>
.myClass {
couleur: blanc;
couleur de fond: DodgerBlue;
padding: 20px;
text-align: center;
marge: 10px;
}
</style>

<h1>L'élément template</h1>

<p>Cet exemple remplit la page web avec un nouvel élément div pour chaque élément d'un tableau.</p>
<p>Le code HTML de chaque élément div est à l'intérieur de l'élément template.</p>

<p>Cliquez sur le bouton ci-dessous pour afficher le contenu caché de l'élément de modèle.</p>

<button onclick="showContent()">Afficher le contenu caché</button>

function showContent() {
let temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
//obtenir l'élément div du modèle :
item = temp.content.querySelector("div");
//pour chaque élément dans le tableau :
for (i = 0; i < myArr.length; i++) {
//Créer un nouveau nœud, basé sur le modèle :
a = document.importNode(item, true);
//Ajouter des données du tableau :
a.textContent += myArr[i];
//ajoutez le nouveau nœud où vous le souhaitez :
document.body.appendChild(a);
}
}
</script>

</body>

</html>