我使用函数<template>获取HTML5 importNode()的有效副本：
function getTemplate() {
var t = document.getElementById("example");
return document.importNode(t.content,true);
}
在此之后，我填写动态数据，
var t = fillTemplate({
id:"test",
text:"Enter test data"
});
最后，我将节点附加到目标容器中：
var c = document.getElementById("container");
var result = c.appendChild(t);
我的问题：result节点的所有内容都被剥离了：我无法在结果节点中访问模板的组件元素。实际上，result节点在执行appendChild操作后根本不包含子节点。
我希望appendChild的返回值应指向已插入容器的节点，该节点现在是活动文档的一部分。任何解释为什么不是这种情况？
这是jsfiddle（在Chrome 53中测试）：
答案 0 :(得分：2)
这是因为您不会操纵Node而是操纵DocumentFragment。
如果你想获得插入的节点数，你应该在父容器（你的例子中为c）上执行调用，然后你得到正确的答案（5）。
但是你想要只计算你添加的子元素，你不应该使用childNodes，而是使用ParentNode接口的属性children：
c.childNodes.length // = 5
c.children.length // = 2
在附加到容器c之后，DocumentFragment t不再有子项了。
各种其他方法可以将文档片段作为参数 （例如，任何Node接口方法，如Node.appendChild和 Node.insertBefore），在这种情况下片段的子节点是 附加或插入DOM中您插入的位置 文档片段，而不是片段本身。 片段本身 继续存在（在记忆中），但现在没有孩子。
此外，还有各种操作 - 例如将节点作为子节点插入 另一个Node - 可以将DocumentFragment对象作为参数; 这会导致DocumentFragment 的所有子节点都存在 已移动到此节点的子列表。