我可以保留对文档片段的引用吗？

Question

我正在玩一个document fragment.当我将它附加到DOM时,我发现很难理解它的行为方式.

doc fragment当我向其中插入一些东西时,我创建了一个我赋给变量的东西,并将doc片段附加到元素中.但是如果我清除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

当您将一个元素(例如<div>)附加到DOM中时,元素将被添加为其新父元素的子元素.div的孩子们没有改变.从父项中删除元素时,元素只是从DOM中分离出来.你仍然有一个元素的引用它仍然包含它的子代,可以在以后重新附加.

将DocumentFragment追加到DOM中时,DocumentFragment的子项将从DocumentFragment中删除,并移动为其DOM元素父项的子项.DocumentFragment现在为空.

因此,您应该附加片段的深层克隆,而不是附加DocumentFragment.

有关详细信息,请参见http://dom.spec.whatwg.org/#concept-node-insert.