Question

奇怪的是，无法在线找到解决方案。我在innerHTML区域内有一些contentEditable我试图添加到文档片段...并保留格式，其中包括中断标记。当我这样做时：

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

最后一个日志返回（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]);
}

我得到＆＃34; img，br，span，br，img，br，span＆＃34;。一旦我取消注释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节点展平为列表。如果有嵌套节点，它们将不再嵌套。

将节点附加到文档片段以及break标记

1 个答案: