When generating dynamic content, which way is better to simply create the HTML and insert it into a .innerHTML or to create elements in the DOM directly?

I'm not concerned with plexity or other. Just processing time on the client.

Which is quicker?

If I had to guess in order of efficiency (low processing time) this would be:

1. DOM Creation
2. .innerHTML property insertion
3. direct writing

This would be inversely related to the plexity of implmenting:

1. direct writing
2. .innerHTML property insertion
3. DOM Creation

This is a validatin question? Can someone validate that this is the trade-offs for determining how to update the client (i.e. javascript) when considering plexity and speed?

Research:

I'm not concerned with security like they are here-> InnerHTML vs. DOM - Security

InnerHTML vs. DOM This is not a duplicate as it covers only part of my question.

When generating dynamic content, which way is better to simply create the HTML and insert it into a .innerHTML or to create elements in the DOM directly?

I'm not concerned with plexity or other. Just processing time on the client.

Which is quicker?

If I had to guess in order of efficiency (low processing time) this would be:

1. DOM Creation
2. .innerHTML property insertion
3. direct writing

This would be inversely related to the plexity of implmenting:

1. direct writing
2. .innerHTML property insertion
3. DOM Creation

This is a validatin question? Can someone validate that this is the trade-offs for determining how to update the client (i.e. javascript) when considering plexity and speed?

Research:

I'm not concerned with security like they are here-> InnerHTML vs. DOM - Security

InnerHTML vs. DOM This is not a duplicate as it covers only part of my question.

• javascript

Share Improve this question Follow edited May 23, 2017 at 12:21 CommunityBot 111 silver badge asked Jan 9, 2012 at 22:22 user656925user656925 4

• I can't back this up with a link right now, but IIRC innerHTML is fastest. – Jon Commented Jan 9, 2012 at 22:35
• 1 possible duplicate of What is better, appending new elements via DOM functions, or appending strings with HTML tags? – Wayne Commented Jan 9, 2012 at 22:35
• The dup I linked includes lots of jsperf links and a discussion around which is faster in which cases. – Wayne Commented Jan 9, 2012 at 22:36
• Why is noboby paring .innerHTML to say a direct write..say document.write() or simply rendering HTML directly? – user656925 Commented Jan 9, 2012 at 23:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

In my experience they are basically parable in performance. However if you use the DOM approach you get better accessibility to the power of closures so you can bind data and functions to the individual DOM elements directly.

For performance, the main thing, regardless of approach, is to hide or remove the part of the DOM you want to modified, make all you alterations outside the DOM, then put it back into the DOM as one single operation to avoid unnecessary reflows (repaints) in the browser.

From my own personal tests they're all fast enough for most needs. But if you're doing something crazy like creating thousands of elements to a page the fastest way is to use document fragments. John Resig wrote a good blog post about it. http://ejohn/blog/dom-documentfragments/

It is not necessarily true that DOM insertion is faster than updating innerHTML, see benchmarks at http://segdeha./experiments/innerhtml/ and http://www.quirksmode/dom/innerhtml.html, for example. Implementing the innerHTML solution might be quicker, just note that it is not available when using XHTML.

Lots of jsPerf benchmarks cover this topic; try searching the web for "jsperf innerhtml domelement" or other meaningful binations of your search.