Question

How do I append elements into the dom in one go? As you can see from the code below I’m appending stuff into a root element(tr_next) inside a loop.

$('.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);
});

I’ve watched this video at vimeo: How browsers work internally and they said that when appending stuff into the dom you should do it in one go because the browser needs to perform a lot of repainting(or something like that) which affects performance.

Answer 1

jQuery Fundamentals has some handy guidelines about this.

Loops like your sample and what ends up happening with ‘append(item1,item2)’ are the slowest.

You might want to create a document fragment, append everything to that and then after the loop is complete, append the fragment to the body:

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

Or use the loop to build a string of html and append like so

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