將節點附加到文檔片段以及中斷標籤

奇怪的情況，在網上找不到解決方案。我在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

將節點附加到文檔片段以及中斷標籤

回答

相關問題