javascript - 为什么添加后 DocumentFragment 被清除

Question

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

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

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

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

Answer 1

来自 MDN 文档DocumentFragment

各种其他方法可以将文档片段作为参数（例如，任何Node接口方法，如Node.appendChildand Node.insertBefore），在这种情况下，附加或插入片段的子项，而不是片段本身。

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

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

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

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