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

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观看了这个视频:浏览器如何在内部工作,他们说当将内容添加到dom中时,你应该一次性完成,因为浏览器需要执行大量重新绘制(或类似的东西),这会影响性能.

Answer 1

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

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

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

至少它会清理你的代码.