将节点附加到文档片段以及中断标签

奇怪的情况，在网上找不到解决方案。我在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);

最后的日志返回（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，跨度，BR，IMG，BR，跨度”。只要我取消注释appendChild，休息消失。为什么？？

我的解决办法：

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

来源

2015-07-03 denikov

当您添加元素到documentFragment，你从DOM，这让你迭代更新和重新索引集合删除它们。

如果<br>元素是所有其他元素之一，那么当然，他们会因为重新索引而被跳过。

要修复它，请反向迭代，以避免重新索引而不是朝向它。

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

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

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

来源

2015-07-03 16:25:19

我只是'while（content.children.length> 0）{d.appendChild（content.children [0]）;}'。这是有道理的，我明白，它正在重新索引 – denikov

是的，这也可以。要点是不要跳过索引。 – 2015-07-03 16:29:38

将节点附加到文档片段以及中断标签

回答

相关问题