为什么DocumentFragment在追加后被清除

Why is DocumentFragment cleared after appending

本文关键字：清除 追加 DocumentFragment 为什么      更新时间：2023-09-26

第一个日志返回完整的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>

来自DocumentFragment 上的MDN文档

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

CCD_ 7将文档片段复制到CCD_。

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

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

var nodes = Array.prototype.slice.call(foo.childNodes);
console.log(nodes);
main.appendChild(foo);
console.log(nodes);
相关文章：