0

如何一次性将元素附加到 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 看过这个视频：浏览器是如何在内部工作的，他们说在将内容附加到 dom 时，你应该一次性完成，因为浏览器需要执行大量的重绘（或类似的事情），这会影响性能。

4

4 回答 4

5

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

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

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

至少它会清理你的代码。

于 2012-08-15T01:42:32.893 回答
1 
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())
});

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

于 2012-08-15T01:54:36.617 回答
1

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

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

现在，您可以在每次向实际容器添加新内容然后附加容器时循环或执行逗号操作或其他内容，而不会导致回流，从而仅触发一个回流而不是一大堆。

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

于 2012-08-15T02:07:37.220 回答
1

jQuery Fundamentals对此有一些方便的指导。

像您的示例这样的循环以及最终使用“追加（项目1，项目2）”发生的事情是最慢的。

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

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

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

 $('<tr>').html(myHtmlString)
于 2012-08-15T02:12:39.547 回答