Question

Am I better to move a node I sent down form the server or to insert it?

I’m using jQuery (1.4) but would like to know for both jQuery and JS in general. In this case the node is small with only one child. But what if it were a large list?

What

large list 1 = 200 li nodes

large list 2 = 1000 li nodes

Example:

Insertion:

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

$('#box').before($('<ul id="list"><li>...</ul>')); 

vs

Manipulation:

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

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

Answer 1

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.