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

我在玩一个

文档片段

。当我将它附加到DOM中时，我发现很难理解它的行为

我创建了一个

doc片段

，当我向其中插入一些内容时，我将其分配给一个变量，并将doc片段附加到一个元素中。但是，如果我清除

元素

我的变量，该变量将引用包含空文档片段的文档片段

我试图为创建文档片段的第三方库创建缓存。所以我想让它工作起来。我应该在将片段附加到DOM之前创建克隆节点吗

我创建了一个JS小提琴：

var test=document.createDocumentFragment（）；
//var test=document.createElement（“div”）；//这一个有效
$（test）.append（$（“”）.html（'helloworld！'））；
$（“#结果”）。追加（测试）；
setTimeout（函数（）{
$（“#结果”）.children（）.remove（）；
$（“#结果”）。追加（测试）；
log（'现在应该附加测试'）；
css（{“背景”：“#FF0000”}）；
},5000)

Javascript对象是通过引用而不是值复制的。因此，当您将片段分配给变量，然后将片段插入DOM时，变量和DOM都引用同一个对象。对其中一个的任何更改也会发生在另一个中

---

如果确实希望变量引用与DOM不同的对象，则克隆是正确的方法。

将元素（例如

）附加到DOM中时，该元素将作为其新父元素的子元素添加。该部门的子女没有改变。当您从其父元素中移除元素时，该元素只是从DOM中分离出来。如果您仍有对元素的引用，则该元素仍将包含其子元素，可在以后重新附着

将DocumentFragment附加到DOM中时，DocumentFragment的子元素将从DocumentFragment中删除，并移动为其DOM元素父元素的子元素。DocumentFragment现在为空

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

---

有关血淋淋的详细信息，请参阅。

但为什么要使用createElement？为什么会被删除？因为它返回一个对象，而返回一个HTML元素。好的，有意义，谢谢。可以从DOM中删除文档片段而不删除它吗？请参见@StephenThomas，这不是真的，DocumentFragment和HtmleElement都是从节点继承的对象。非常有用的答案+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)