Question

我有一个模板（以后有很多），我希望在克隆后保存引用：

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);

这很好用。测试具有克隆的所有属性。但是，如果我将克隆插入到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);

Answer 1

模板元素的.content属性返回一个DocumentFragment，它基本上是DOM节点的虚拟容器。当在appendChild中插入DocumentFragment时，会将片段的子代附加/移动到新的父代，这就是为什么该操作后片段为空的原因。

如果模板只有一个孩子，则可以在该片段上使用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>

在将其添加到DOM之前，是否可以保留对javascript中克隆的html模板元素的引用？

1 个答案: