What's faster DOM Insertion or Manipulation?

Answer 1

The two are the same. If you look at the source, you can see that 'insertBefore' is merely mapped to 'before'.

REF for 'insertBefore': http://gist.github.com/277432#LID4389

REF for 'before': http://gist.github.com/277432#LID4088

Answer 2

One way to improve performance would be to provide a context for the insertion.

When doing $('#list').insertBefore($('#box')); , you should provide the context node if you have it, rather than research the entire tree. Something similar to

var myWapper = getWrapperFromEventOrWhereEverYouMightHaveIt();

//more code doing fancy things here

$(myWrapper, '#list').insertBefore($('#box')); 

Answer 3

The client is going to spend a lot more time rendering your new items than it will actually putting them into the DOM. I would recommend you remove the #list from the DOM entirely, add the items to it, and then put it back into the DOM. At least for large data sets.

Even then, the repaint could be slow, especially on IE with complex CSS.

Answer 4

If your entire list is updated when you get data from the server then you should have a structure that resembles something like this:

<div id="wrap">
  <ul id="list"></ul>
  <div id="box></div>
</div>

Then you can have all the nodes sent as just a list of li elements and then do something like so:

$("list")[0].innerHTML = xhr.responseText // response text is of form 
                                          //<li>item</li><li>item</li>... etc

Tests have shown that innerHTML is faster then append, insert (before and after) etc. http://www.quirksmode.org/dom/innerhtml.html