Geek Answers Handbook

What is a quick DOM insertion or manipulation?

I better move the node, I sent it from the server or insert it?

I am using jQuery (1.4), but would like to know both jQuery and JS in general. In this case, the node is small with one child. But what if it was a big list?

what

large list 1 = 200 nodes

long list 2 = 1000 nodes

Example:

Insert:

<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'));
+5
source share
4 answers

The client will spend much more time rendering your new products than actually putting them in the DOM. I would recommend you completely remove #list from the DOM, add elements to it, and then put it back in the DOM. At least for large datasets.

, IE CSS.

+4

. , , "insertBefore" "".

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

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

+1

- .

$('#list').insertBefore($('#box')); node, , . -

var myWapper = getWrapperFromEventOrWhereEverYouMightHaveIt();

//more code doing fancy things here

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

If your entire list is updated when you receive 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 designate all the nodes as a list of li elements, and then do something like this:

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

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

0
source

More articles:


All Articles