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

时间:2013-08-14 12:09:31

标签: javascript jquery html dom

我正在玩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)

2 个答案:

答案 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不同的对象,那么克隆就是正确的方法。