我正在玩一个文档片段.当我将它附加到DOM时,我发现很难理解它的行为方式.
当我向其中插入一些东西时,我创建了一个我分配给变量的doc片段,并将doc片段附加到元素中.但是如果我清除元素,那么应该引用doc片段的变量包含一个空的文档片段.
我试图为创建文档片段的第三方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)
解决方法
当您将一个元素(例如< div>)附加到DOM中时,Element会被添加为其新父元素的子元素. div的孩子们没有改变.从父项中删除元素时,元素只是从DOM中分离出来.你仍然有一个元素的引用它仍然包含它的子代,可以在以后重新附加.
将DocumentFragment追加到DOM中时,DocumentFragment的子项将从DocumentFragment中删除,并移动为其DOM元素父项的子项. DocumentFragment现在为空.
因此,您应该附加片段的深层克隆,而不是附加DocumentFragment.
有关详细信息,请参阅http://dom.spec.whatwg.org/#concept-node-insert.