Menu
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'));
925
DOM manipulation is the interaction of the JavaScript DOM API to modify or change the HTML document. With DOM manipulation, you can create, modify, style, or delete elements without a refresh. It also promotes user interactivity with browsers. You can use different programming languages to manipulate the DOM.
jQuery provides various methods to add, edit or delete DOM element(s) in the HTML page. The following table lists some important methods to add/remove new DOM elements. Inserts content to the end of element(s) which is specified by a selector.
The Document Object Model (DOM) is a programming interface for HTML web pages. Scripting languages, like JavaScript, can access and manipulate the DOM to alter the display of a web page.
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.
159
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
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
