的appendChild（）从进口模板

Question

内容我获得使用功能importNode()一个HTML5 <template>的有源副本：

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测试）：

https://jsfiddle.net/rplantiko/mv2rbhym/

Answer 1

也正是由于这样的事实，你不操纵Node但DocumentFragment。

如果你想得到插入节点的数量，你应该在父容器上执行调用（在你的例子中为c），那么你会得到正确的答案（5）。

但要算只有你加入，你不应该使用childNodes子元素，但ParentNode接口children的财产：

c.childNodes.length // = 5 
c.children.length // = 2 

被附加到容器c，该DocumentFragment的t后再也没有孩子了。

从MDN documentation：

各种其它方法可利用一个文档片段作为参数 （例如，任何节点接口的方法，如Node.appendChild和 Node.insertBefore），在这种情况下，儿童的片段是 附加或插入DOM中插入 文档片段的位置，而不是片段本身。 片段本身 继续存在（在内存中），但现在没有孩子。

的DOM 3 W3C recommendation也很清楚：

此外，各种操作 - 如插入节点作为孩子另一节点的 - 可采取的DocumentFragment对象作为参数; 这导致DocumentFragment 的所有子节点为 将移动到此节点的子节点列表。