什么是创建元素并将它们附加到jquery中的dom的最佳方法？

Question

假设我使用jQuery在javascript代码中添加li元素.

例1:

for(var i=0 i<=5; i++){

    var li = $("<li/>");
    li.html("teest "+i);
    $("#ulid").append(li);

}

我已经了解到上面的例子是一个不好的做法,因为循环在每次点击追加(li)时都会重建dom.

如果是这种情况,那么与上述示例完全相同的最佳方法是什么？

Answer 1

对于绝大多数用例,你所做的事情可能都很好.你的代码最终会appendChild为每个调用DOM 函数一次li,我很确定这也是迄今为止所有答案都能做到的.而且,它可能很好,但每次都可能导致回流.

在绝对需要避免在每次循环中引起DOM重排的情况下,您可能需要一个文档片段.

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引擎提供了添加所有元素的机会,并且最后只进行了重排.

Answer 2

您可以在追加文本中包含内部HTML以及一次包含多个元素,因此只需构建一个大字符串并将其附加一次即可.

var append_text = "";
for (i = 0; i <= 5; i++) {
    append_text += "<li>test " + i + "</li>";
}
$("#ulid").append(append_text);

Answer 3

jQuery .append方法接受元素数组,因此您可以这样做:

var elems = [];
for(var i=0; i<=5; i++){
    var li = $("<li/>");
    li.html("teest "+i);
    elems.push(li[0]); // Note we're pushing the element, rather than the jQuery object
}
$("#ulid").append(elems);