将节点与中断标记一起附加到文档片段

Question

奇怪的情况，网上找不到解决办法。我在 contentEditable 区域中有一些 innerHTML，我试图将其添加到文档片段中...并保留格式，其中包括中断标记。当我这样做时：

var d = document.createDocumentFragment();
var content = document.getElementById('content').getElementsByTagName('*');
console.log(content);
//this logs (img, br, span, br, img, br, span) ~ I shortened the output to just tags
for (var i = 0; i < content.length; i++) {
    (function(iCopy) {
        d.appendChild(content[iCopy]);
    })(i);
}
console.log(d);

最后一条日志returns (img, span, img, span)。为什么循环无法识别中断标记，我该怎么做才能将它们添加到我的文档片段中？

当我登录时没有向片段附加任何内容，如下所示：

var content = document.querySelector('#content');
for (var i = 0; i < content.children.length; i++) {
    console.log(content.children[i].tagName);
    //d.appendChild(content.children[i]);
}

我得到 "img, br, span, br, img, br, span"。一旦我取消注释 appendChild，中断就会消失。为什么？？

我的解决方案：

var d = document.createDocumentFragment();
var content = document.querySelector('#content');
while (content.children.length > 0) {
    d.appendChild(content.children[0]);
}
console.log(d);

Answer 1

当您向 documentFragment 添加元素时，您是在从 DOM 中删除它们，这使得您正在迭代的集合更新并重新编制索引。

如果 <br> 元素是每隔一个，那么自然地，它们会因为重新索引而被跳过。

要修复它，请反向迭代，这样您就可以远离重新索引，而不是转向它。

for (var i = content.length-1; i > -1; i--) {
    d.appendChild(content[i]);
}

仅供参考，我删除了立即调用的函数，因为它毫无意义。

您应该知道，这会将所有 DOM 节点展平到列表中。如果有嵌套节点，它们将不再嵌套。

将节点与中断标记一起附加到文档片段

Append nodes to document fragment along with break tags

javascript

for-loop

contenteditable

documentfragment