Question

如何一次性将元素添加到dom中？从下面的代码中可以看出，我将东西附加到循环内的根元素（tr_next）中。

$('.abc').each(function(){
  //create element code here
  var tr_next = $("<tr>");
  var td_contact_fname = $("<td>").attr({"width" : "190px" , "align" : "center"});

  td_contact_fname.appendTo(tr_next);
  td_contact_lname.appendTo(tr_next);
  td_month.appendTo(tr_next);
  td_day.appendTo(tr_next);
  td_email.appendTo(tr_next);
});

我在vimeo上观看过这个视频：How browsers work internally他们说当把东西附加到dom中时你应该一次性完成，因为浏览器需要进行大量的重新绘制（或类似的东西）这会影响表现。

Answer 1

.append函数可以接受多个jQuery对象作为参数：

tr_next.append(td_contact_fname,td_contact_lname,td_month,td_day,td_email);

这是否真的通过单个操作执行所有追加，我不确定，但如果有一种方法可以优化多个追加，我会假设jQuery团队已经实现了它。

至少它会清理你的代码。

Answer 2

var tr_next = $("<tr>");
var td_contact_fname = $("<td>").attr({"width" : "190px" , "align" : "center"});
var groupby = td_contact_fname.add(td_contact_lname,td_month,td_day,td_email);

$('.abc').each(function(){
    tr_next.append(groupby.clone())
});

编辑：不要忘记克隆元素;

Answer 3

您可以创建元素而不将它们附加到DOM：

var $_container = $('<div id="someContainerId" />');

现在你可以循环或做逗号或者你有什么，而不会在每次向实际容器添加新东西时引起重排，然后附加容器，只触发一次回流而不是一堆回流。

对于非jQuery方法，我建议查找documentFragment。

Answer 4

jQuery Fundamentals有一些方便的指导方针。

像你的样本一样的循环以及'append（item1，item2）'最终发生的事情是最慢的。

您可能想要创建一个文档片段，将所有内容附加到该片段，然后在循环完成后，将片段附加到正文：

   var frag = document.createDocumentFragment();
   $('abc').each(function() {
      frag.appendChild(/*Stuff you want to append */);
   }
   $("<tr>").appendChild(frag);

或者使用循环来构建一个html字符串并像这样追加

 $('<tr>').html(myHtmlString)

如何一次性将元素追加到dom中

4 个答案: