0

奇怪的情况，网上找不到解决办法。我有一些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]);
}

我得到“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);
4

1 回答 1

1

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

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

要修复它，请反向迭代，以便您远离重新索引而不是走向它。

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

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

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

于 2015-07-03T16:25:19.407 回答