Max*_*kyi 7 html javascript dom
我已经通过计算器问题,搜查,发现关于同一主题的一些问题,但没有人有一个广泛的答案我要找的.大多数答案都围绕着性能,但我也在寻找其他差异.基本上,这个简洁地总结了这个问题:
如果我在一个变量中创建一个元素(例如),但是不要将它附加到DOM,添加元素(div,表格等)和东西,然后完成所有工作(循环,验证,元素样式) ,附加该元素,它是否与片段相同？
我决定再次试一试,看看是否有人能给出一个好的答案.
那么,为什么我要使用它:
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有原型链HTMLDivElement - HTMLElement - Element - Node - EventTarget,而a document-fragment有DocumentFragment - Node - EventTarget.这意味着div有更多方法和属性可用(如innerHTML).divDOM 附加到DOM时,将插入整个元素,该变量仍引用该元素.附加document-fragment插入其所有内容,使变量引用空片段.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>
element,如果你只需要插入一个元素(与其他元素里面的话).element,如果你想使用的innerHTML将文本格式的解析HTML.document-fragment如果要插入多个相邻元素,请使用a .| 归档时间： |
|
| 查看次数： |
2030 次 |
| 最近记录： |