为什么在追加后清除DocumentFragment

Question

第一个日志返回完整的li元素，而第二个日志返回空的DocumentFragment。为什么？我无法在任何文档中找到有关该行为的任何信息。

<template id="my-template"> 
    <li>foo</li> 
</template> 

<ul id="main"> 
</ul> 

<script> 
    var main = document.getElementById('main'); 
    var fooTemplate = document.getElementById('my-template'); 
    var foo = fooTemplate.content.cloneNode(true); 

    console.log(foo); 
    main.appendChild(foo); 
    console.log(foo); 
</script> 

Answer 1

From the MDN docs on DocumentFragment

各种其它方法可利用一个文档片段作为参数（例如，任何Node接口方法如Node.appendChild和Node.insertBefore），在这种情况下，片段的儿童被附加或插入，而不是片段本身。

foo = fooTemplate.content.cloneNode(true)将文档片段复制到foo。

main.appendChild(foo)将foo文档片段的内容移动到main中。 foo仍然是一个文档片段，并且所有节点都已移动，因此它是空的。

如果您想要在添加DOM节点后保留对DOM节点的引用，则需要存储childNodes，但如果您只引用nodeList，则它将为空，因此您需要将其转换为Array：

var nodes = Array.prototype.slice.call(foo.childNodes); 
console.log(nodes); 
main.appendChild(foo); 
console.log(nodes);