假设我使用jQuery在
javascript代码中添加li元素.
例1：
for(var i=0 i<=5; i++){
var li = $("<li/>");
li.html("teest "+i);
$("#ulid").append(li);
}
我已经了解到上面的例子是一个不好的做法,因为循环在每次点击追加(li)时都会重建dom.
如果是这种情况,那么与上述示例完全相同的最佳方法是什么？
解决方法
对于绝大多数用例,你所做的事情可能都很好.你的代码最终会为每个li调用一次DOM appendChild函数,我很确定这也是到目前为止所有答案都能做到的.而且,它可能很好,但每次都可能导致回流.
在那些你绝对需要避免在每次循环中引起DOM重排的情况下,你可能需要一个document fragment.
var i,li,frag = document.createDocumentFragment();
for(i=0; i<=5; i++){
li = $("<li>" + "teest "+i + "</li>");
frag.appendChild(li[0]);
}
$("#ulid").append(frag); // Or $("#ulid")[0].appendChild(frag);
附加片段时,会附加片段的子节点,而不是实际片段.这里的优点是作为单个DOM调用,您为DOM引擎提供了添加所有元素的机会,并且最后只进行了重排.
