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

前端之家收集整理的这篇文章主要介绍了javascript – 我可以保留对文档片段的引用吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在玩一个文档片段.当我将它附加到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.

原文链接:https://www.f2er.com/js/149925.html

猜你在找的JavaScript相关文章