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重排的情况下，您可能需要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引擎提供添加所有元素的机会，并且最后只进行重排。

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);

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

3 个答案: