Appending template.content.cloneNode(true) multiple times not working

user_13679974 0
Viewed 238

This does not work:

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>

But this does:

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>

Why? Why do you have to clone the node every time you want to use the template?

web-component html javascript
1 Answers

template.content contains a documentFragment it can only be inserted into DOM once:

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild() or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment

So after it was inserted into div1 variable templateContentCloned become an empty documentFragment hens nothing inserted into div2 and div3

user_29300380
Related