document.createDocumentFragment（）似乎在被追加後被清空了？

如果使用document.createDocumentFragment()創建一個DocumentFragment，將子追加到它，然後將緩衝區附加到某些內容，緩衝區的所有子節點似乎都會消失。例如：document.createDocumentFragment（）似乎在被追加後被清空了？

var buffer = document.createDocumentFragment() ; 

for (var i = 1; i <= 10; i++) 
{ 
    var div = document.createElement('div'); 
    div.innerHTML = i; 
    buffer.appendChild(div); 
} 

console.log('buffer: ' , buffer); 

document.getElementById('container').appendChild(buffer); 

console.log('buffer now: ' , buffer);

這裏，在第一的console.log，緩衝節點的childNodes有10個孩子，在第二，擁有的childNodes 0

是否有辦法在某個地方保留的childNodes而不是讓他們重置，爲了緩存緩衝區，而不必每次都追加兒童到它？

來源

2012-06-06 Click Upvote

我希望這個例子不是生產代碼，對不對？ :-) –

您剛剛描述了DocumentFragment的性質。如果你想重複使用相同的內容，你可以在每次追加到文檔之前克隆片段：

var bufferCopy = buffer.cloneNode(true); 
document.getElementById('container').appendChild(bufferCopy);

來源

2012-06-06 13:22:02

雖然我認爲它不會提供太多的性能好處，是嗎？如果你有10-100個孩子追加到緩衝區？ –

@ClickUpvote：性能優於什麼？ –

選項1：遍歷10-100個div並將它們追加到緩衝區，然後每當用戶單擊一個按鈕時將緩衝區附加到dom，或者選項2：克隆緩衝區並在第一次存儲時，未來時間只追加克隆/緩存的緩衝區。使用選項2會有什麼顯着的性能好處？ –

document.createDocumentFragment（）似乎在被追加後被清空了？

回答

相關問題