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

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

示例1:

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

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

}

---

for（var i=0 i您可以在append文本中同时包含内部HTML和多个元素，因此只需构建一个大字符串并将其追加一次即可

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

var append_text=”“；
对于（i=0；i，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);

var elems=[]；
for（var i=0；i对于绝大多数用例来说，您所做的可能都是好的。您的代码最终会为每个
li
调用一次DOM
appendChild
函数，我很确定这也是目前为止所有答案都会做的。同样，这可能是好的，尽管每次都可能导致回流

在那些绝对需要避免每次通过循环时导致DOM回流的情况下，您可能需要

var i，li，frag=document.createDocumentFragment（）；
对于（i=0；i@dtbarne//这是一个很好的例子，但我正在寻找一个使用jQuery的解决方案。我所说的jQuery是$（“
”），这样我就可以使用addClass、click（）和所有其他有用的函数。这是jQuery。它只是用得比较轻。@Moon:上面的例子使用的是jQuery，所以你可能想对$（“
）有一个更好的描述不仅仅是“使用jQuery”。@mellamokb，Adrian Schmidt//我想在循环中为每个li元素附加一个事件。因此..我想使用var li=$（“
”）；然后通过li附加一个事件。单击（function（）{}）；@Moon:在循环结束后可以这样做：
$（'li'）。单击（function（）{}）
。或者，如果您已经有了其他不想涉及的
li
标记，请给它们所有相同的类。“我已经了解到，上面的示例是一个不好的做法，因为循环每次点击append（li）时都会重建dom。”“不，没有。它执行dom
appendChild
操作，这比“重建”。我并不是说上述方法是最有效的方法（它可能会在每次通过时导致回流），但也不是那么糟糕。要从回流的角度提高效率，需要你开始处理一个文档片段。@T.J.Crowder:谢谢你的澄清。我甚至没有听说过“糟糕的做法”"之前声明过，所以我只是在这里猜测。我认为如果反复调用.append是一种不好的做法，当然jQuery开发人员已经将使用数组调用它一次作为一种好的做法。而且这也是一个非常合理的假设。你是对的。我只是浏览了代码，他们在后台构建了一个片段。非常好。y中有轻微的错误但是，我们的代码：
append
接受一个元素数组，但不接受一个jQuery实例数组（这有点奇怪），只需将
elems.push（li）；
更改为
elems.push（li[0]）；
。我已经删除了我的错误注释。@T.J.Crowder:谢谢你的修复。我没有看到这样的结果：）是的，这也让我感到惊讶。jQuery通常可以互换地接受jQuery实例或DOM元素，但显然不是在这里…@Moon:：-）非常好，而且这是相当有效的（如果你打算使用jQuery，那么你是在用一定的效率换取各种好处），但@dancek的答案也使用了一个文档片段，就在幕后。通过自己这样做，也许可以节省几纳秒，但谁知道如果你走jQuery路线，jQuery将为你处理什么样的边缘情况呢。知道我现在知道的，我可能会倾向于@dancek的方法。（或者不，我必须进一步考虑。）@Moon：只需执行代码，通过@dtbarne的方法，jQuery还可以在幕后为您构建一个文档片段。因此您有各种选择。：-）
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);