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节点的引用，你需要存储childNodes，但是如果你只引用nodeList，那么它将是空的，所以你'我需要将其转换为Array：

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

为什么在追加后清除DocumentFragment

1 个答案: