我正在玩document fragment
。当我将它附加到DOM时,我发现很难理解它的行为。
我创建了一个doc fragment
,当我向其中插入一些内容时,我将其分配给变量,并将doc片段附加到元素中。但是如果我清除应该引用doc片段的element
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)
答案 0 :(得分:11)
当您将一个元素(例如<div>
)附加到DOM中时,该元素将被添加为其新父元素的子元素。 div的孩子们没有改变。从父项中删除元素时,元素只是从DOM中分离出来。你仍然有一个元素的引用它仍然包含它的子代,可以在以后重新附加。
当您将DocumentFragment附加到DOM中时,DocumentFragment的子项将从DocumentFragment中删除,并移动为其DOM元素父项的子项。 DocumentFragment现在为空。
因此,不应附加DocumentFragment,而应附加片段的深层克隆。
有关血腥的详细信息,请参阅http://dom.spec.whatwg.org/#concept-node-insert。
答案 1 :(得分:-1)
Javascript对象是通过引用而不是值复制的。因此,当您将片段分配给变量然后将片段插入DOM时,变量和DOM都引用相同的对象。您对其中的任何更改也会发生在另一个中。
如果你真的希望变量引用一个与DOM不同的对象,那么克隆就是正确的方法。