CODEWITHSUNDEEP
jqueryperformancedominsert
Mircea
Mircea

Reputation: 11593

Javascript jQuery best way to insert a big piece of code into DOM

I have a big piece of code that needs to be inserted into DOM at some point. The code also contain some variables:

<ul id="info'+value+'" class="info"><li class="hide"></li><li class="lock"><ul>
// just a piece of the code with variable "value"

Right now I am doing:

var codeToInsert = "<some code/>"
codeToInsert.insertAfter('#someID');

Is there a better way to do it from the performance point of view?

Upvotes: 8

Views: 3229

Answers (2)

Andras Vass
Andras Vass

Reputation: 11638

If you want to insert big piece of code, use jQuery for its selector and then use the innerHTML DOM property - it is the fastest way to insert a big chunk of HTML. Do not wrap the string that is to be inserted into JQuery, leave it as a string.

E.g.: $('#somePlaceholder')[0].innerHTML = myHTMLString;.

http://www.quirksmode.org/dom/w3c_html.html:

In general innerHTML is faster than normal DOM methods because the HTML parser is always faster than the DOM engine. If you want to do complicated changes, use innerHTML. (For simple changes it does not really matter which method you use, although innerHTML remains theoretically faster.)

If you do string concatenation in JS, create an array, push() the parts and join() at the end instead of appending with e.g. += or +. It makes a difference esp. in IE.

Upvotes: 9

Sidharth Panwar
Sidharth Panwar

Reputation: 4654

Top of my head, you can also use .append(), .appendT(), .before(), .after() etc. Check this for a range of such functions: http://api.jquery.com/category/manipulation/

Upvotes: 0

Related Questions