8

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

doc fragment変数に何かを挿入するときに変数に割り当てるa を作成し、doc フラグメントを要素に追加します。しかし、doc フラグメントを参照する必要がある my 変数をクリアするとelement、空のドキュメント フラグメントが含まれます。

ドキュメントフラグメントを作成するサードパーティの 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)
4

2 に答える 2

15

要素 ( など<div>) を DOM に追加すると、その要素は新しい親の子として追加されます。div の子は変更されません。親から要素を削除すると、要素は DOM から切り離されます。Element への参照がまだある場合は、後で再アタッチできるようにその子が含まれます。

DocumentFragment を DOM に追加すると、DocumentFragment の子は DocumentFragment から削除され、その DOM 要素の親の子になるように移動されます。DocumentFragment は空になりました。

したがって、DocumentFragment を追加する代わりに、フラグメントのディープ クローンを追加する必要があります。

詳細については、 http: //dom.spec.whatwg.org/#concept-node-insert を参照してください。

于 2013-08-14T13:08:35.337 に答える
-2

Javascript オブジェクトは、値ではなく参照によってコピーされます。したがって、フラグメントを変数に割り当ててからフラグメントを DOM に挿入すると、変数と DOM の両方が同じオブジェクトを参照しています。一方に加えた変更は、他方にも反映されます。

DOM とは異なるオブジェクトを参照する変数が本当に必要な場合は、複製が適切な方法です。

于 2013-08-14T12:13:46.430 に答える