我有一个模板（后来更多），我想在克隆后保存参考：
var Atest;
....
let template= document.getElementById("template1");
let clone = template.content.cloneNode(true);
Atest = clone; // Atest is defined global in the first line
document.getElementById("app").appendChild(clone);
这工作得很好。test 具有 clone 的所有属性。但是，如果我将克隆插入到 DOM 测试中，则会丢失他所有的孩子和许多其他信息：
document.getElementbyId("app").appendChild(clone);
测试变量应该具有对将在文档中的相同文档片段（保持在克隆中）的引用。我不想复制元素，因为我想稍后通过变量 test 访问它以修改例如标签的值（与 getElementById() 的方式相同，但不需要附加 id）
这里有一个例子：
HTML
<template id="template1">
<label>Dimension-C</label>
<input data-property="Position" type="text" value ="Pos1"/>
<input data-property="Position" type="text" value ="Pos2"/>
<input data-property="Position" type="text" value ="Pos3"/>1
</template>
JS：
let template= document.getElementById("template1");
let clone = template.content.cloneNode(true);
Atest = clone; // Atest is defined global in the first line
document.getElementById("app").appendChild(clone);
.content模板元素的属性返回 a DocumentFragment，它基本上是 DOM 节点的虚拟容器。插入DocumentFragmentwith 时appendChild，片段的子元素被附加/移动到新的父元素，这就是该操作后片段为空的原因。
如果你的模板只有一个孩子，你可以firstElementChild在片段上使用它来获取对它的引用：
var test;
let template = document.getElementById("template1");
let clone =template.content.cloneNode(true).firstElementChild;
test = clone;
例子：
var test;
let template = document.getElementById("template1");
let clone =template.content.cloneNode(true).firstElementChild;
test = clone;
document.getElementById("app").appendChild(clone);
test.innerHTML += ' success';<template id="template1">
<div>
<span>test</span>
</div>
</template>
<div id="app"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句