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

Question

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

示例 1:

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

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

}

我了解到上面的例子是一个不好的做法，因为循环每次点击append(li)时都会重建dom。

如果是这种情况，执行与上述示例完全相同的操作的最佳方法是什么？

Answer 1

您正在做的事情可能适合绝大多数用例。您的代码最终将为每个 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 引擎有机会添加所有元素，并且仅在最后进行回流。