ドキュメントフラグメントへの参照を保持できますか？

Question

私はdocument fragmentで遊んでいます。 DOMに追加するときの動作を理解することは難しいです。

私はそれにいくつかのものを挿入すると、変数に代入し、要素にドキュメントフラグメントを追加doc fragmentを作成します。しかし、私がelementのdocフラグメントを参照する必要があるmy変数に空のドキュメントフラグメントが含まれていればそれをクリアします。

ドキュメントフラグメントを作成するサードパーティ製のlibのキャッシュを作成しようとしています。だから私はこれを働かせたいと思っています。フラグメントにDOMを追加する前にcloneNodeを作成する必要がありますか？

私はJSのフィドルを作成しました： http://jsfiddle.net/4CTXG/1/

var test = document.createDocumentFragment(); 
//var test = document.createElement("div"); // This one work 

$(test).append($("<div>").html('Hello world!')); 


$("#result").append(test); 

setTimeout(function(){ 
    $("#result").children().remove(); 
    $("#result").append(test); 

    console.log('Now test should have been appended'); 
    $(result).css({"background": "#FF0000"}); 
},5000) 

Answer 1

あなたがDOMに要素（例えば<div>）を追加すると、要素はその新しい親の子として追加されます。 divの子供は変更されません。親から要素を削除すると、要素はDOMから切り離されます。まだElementを参照していて、子要素がまだ残っていて、後で再接続することができます。

あなたはDOMへのDocumentFragmentを追加すると、ドキュメント・の子供はDocumentFragmentのから削除され、そのDOM要素の親の子であることを移動しています。 DocumentFragmentは空になりました。

代わりのDocumentFragmentを付加するので、あなたは、フラグメントの深いクローンを追加する必要があります。

は血みどろの詳細についてはhttp://dom.spec.whatwg.org/#concept-node-insert参照してください。

Answer 2

Javascriptのオブジェクトが参照ではなく値によってコピーされます。したがって、フラグメントを変数に代入してフラグメントをDOMに挿入すると、変数とDOMの両方が同じオブジェクトを参照しています。あなたが1つに行った変更は、もう一方にも発生します。

あなたが本当に変数はDOMとは区別されるオブジェクトを参照する場合は、クローンが正しいアプローチです。