javascript - document.createDocumentFragment() 似乎在附加后被清空？

Question

如果您使用 document.createDocumentFragment() 创建一个 DocumentFragment，将子项附加到它，然后将缓冲区附加到某物，缓冲区的所有子项似乎都消失了。示例:

var buffer = document.createDocumentFragment() ;

for (var i = 1; i <= 10; i++)
{
    var div = document.createElement('div');
    div.innerHTML = i;
    buffer.appendChild(div);
}

console.log( 'buffer: ' , buffer );

document.getElementById('container').appendChild(buffer);

console.log( 'buffer now: ' , buffer );

这里，在第一个 console.log 中，缓冲区的 childNodes 有 10 个子节点，在第二个中，childNodes 有 0 个。

有没有办法将子节点保留在某处而不重置它们，以便缓存缓冲区并且不必每次都将子节点附加到它？

Answer 1

您刚刚描述了 DocumentFragment 的性质。如果您想重复使用相同的内容，您可以在每次将片段附加到文档之前克隆该片段:

var bufferCopy = buffer.cloneNode(true);
document.getElementById('container').appendChild(bufferCopy);