Esto no funciona:
let template = document.getElementById("template"); const templateContentCloned = template.content.cloneNode(true); document.getElementById("div1").appendChild(templateContentCloned); document.getElementById("div2").appendChild(templateContentCloned); document.getElementById("div3").appendChild(templateContentCloned); <template id="template"> <p>Here is my paragraph.</p> </template> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div>Pero esto hace:
let template = document.getElementById("template"); const templateContent = template.content; document.getElementById("div1").appendChild(templateContent.cloneNode(true)); document.getElementById("div2").appendChild(templateContent.cloneNode(true)); document.getElementById("div3").appendChild(templateContent.cloneNode(true)); <template id="template"> <p>Here is my paragraph.</p> </template> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div>¿Por qué? ¿Por qué tienes que clonar el nodo cada vez que quieres usar la plantilla?
template.content contiene un fragmento de documentFragment que solo se puede insertar en DOM una vez:
Un uso común para DocumentFragment es crear uno, ensamblar un subárbol DOM dentro de él, luego agregar o insertar el fragmento en el DOM usando métodos de interfaz de Nodo como appendChild() o insertBefore(). Hacer esto mueve los nodos del fragmento al DOM, dejando un DocumentFragment vacío
Entonces, después de que se insertó en la variable div1 templateContentCloned , se convirtió en un documentFragment vacío. Fragmento de gallinas, nada insertado en div2 y div3