多次附加template.content.cloneNode(true)不工作

Question

这行不通:

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>

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>

为什么?为什么每次要使用模板时都必须克隆节点?

Answer 1

template.content包含一个只能插入DOM一次的documentFragment:

DocumentFragment的一个常见用途是创建一个，在其中组装一个DOM子树，然后将片段追加或插入到DOM中使用Node接口方法，如appendChild()或insertBefore()。这样做会将片段的节点移动到DOM中，留下一个空DocumentFragment

因此，在插入div1变量后，templateContentCloned变成了空的documentFragment，而div2和div3没有插入