8

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

doc fragment当我在其中插入一些东西并将文档片段附加到元素中时，我创建了一个分配给变量的变量。但是，如果我清除element应该引用文档片段的我的变量包含一个空文档片段。

我试图为创建文档片段的第三方库制作缓存。所以我想让这个工作。我应该在将片段附加到 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 回答