我搜索了 stackoverflow 问题，发现了几个关于同一主题的问题，但没有一个能提供我正在寻找的广泛答案。大多数答案都集中在性能上，但我也在寻找其他差异。基本上，this one简明扼要地总结了这个问题:
if I create an element (a for example) in a variable but DO NOT APPEND IT TO THE DOM, add elements (divs, tables, etc ) and stuff and after all the work has been done (loops, validations, styling of elements), that element is appended, is it the same as a fragment?
我决定再试一次，看看有没有人能给出好的答案。
那么，我为什么要使用它:
var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
fragment.appendChild( divContainer );
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );
而不是这个:
var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
document.getElementById("someElement").appendChild( divContainer );
最佳答案
这两种方法在很大程度上是相同的，因为它们都可以用于存储元素而无需立即修改 DOM。不过也有一些问题。
差异:
div具有原型(prototype)链HTMLDivElement - HTMLElement - Element - Node - EventTarget，而document-fragment具有DocumentFragment - 节点 - 事件目标。这意味着div有更多可用的方法和属性(如innerHTML)。- 当将
div附加到 DOM 时，整个元素被插入，变量仍然引用该元素。附加一个document-fragment插入它的所有内容，留下变量引用一个空片段。
用法文档片段:
var fragment = document.createDocumentFragment();
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');
fragment.appendChild(div1);
fragment.appendChild(div2);
div2.appendChild(div3); //fragment now contains the sub-tree
document.body.appendChild(fragment); //fragment is now an empty document-fragment, and is not in the DOM.
结果:
<body>
<div></div> <!--div1-->
<div> <!--div2-->
<div></div> <!--div3-->
</div>
</body>
用法div:
var container = document.createElement('div');
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');
container.appendChild(div1);
container.appendChild(div2);
div2.appendChild(div3); //container is now a div with the sub-tree inside.
document.body.appendChild(container); //container is still the div with the sub-tree, but is now in the DOM.
结果:
<body>
<div> <!--container-->
<div></div> <!--div1-->
<div> <!--div2-->
<div></div> <!--div3-->
</div>
</div>
</body>
简而言之:
- 如果您只想插入一个元素(其中包含其他元素)，请使用
元素。 - 如果您想使用 innerHTML 解析文本格式的 html，请使用
元素。 - 如果要插入多个相邻 元素，请使用
document-fragment。
关于javascript - 文档片段与 `div` 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38180780/