For what I want to acplish, I can use either createElement() or innerHTML and a string.

Which is truly faster in the end? I've been led to believe for a long time that strings are much slower than built-in functions that return the same results, but is it really true?

I ask because I've tried createElement() and it seems that all of the properties that have to be added to each element slows things down. Not only that, but it takes up more space, too. I have a loop that goes anywhere from 1-infinity based on an array's length, though preferably adding up to 50 or so elements before showing signs of slowing down. Within these 50 or so elements that I wish to create are about 10 more elements. So, in all, it's actually creating around 500 elements.

I noticed a bit of a slowdown faster than usual by creating elements with the built-in functions, and due to my fooling around resetting that array (the array was 5D and not set in the same script), I'd like to know which is truly better, both as far as speed goes and simply the better practice, before doing it all over.

For what I want to acplish, I can use either createElement() or innerHTML and a string.

Which is truly faster in the end? I've been led to believe for a long time that strings are much slower than built-in functions that return the same results, but is it really true?

I ask because I've tried createElement() and it seems that all of the properties that have to be added to each element slows things down. Not only that, but it takes up more space, too. I have a loop that goes anywhere from 1-infinity based on an array's length, though preferably adding up to 50 or so elements before showing signs of slowing down. Within these 50 or so elements that I wish to create are about 10 more elements. So, in all, it's actually creating around 500 elements.

I noticed a bit of a slowdown faster than usual by creating elements with the built-in functions, and due to my fooling around resetting that array (the array was 5D and not set in the same script), I'd like to know which is truly better, both as far as speed goes and simply the better practice, before doing it all over.

• javascript
• performance
• innerhtml
• createelement

• maybe you should create both versions and test which one is the fastest – Ibu Commented May 4, 2011 at 4:00
• 1 I doubt there will be a big performance difference either way. I'd remend picking whichever approach is easiest for you to code and maintain. The general rule of thumb I use is that for minor changes (updating text, adding a link, etc.) use innerHTML, and for major changes (adding many links or ponents to a single container, or any structure that is more than 2 nodes deep) use createElement(). – aroth Commented May 4, 2011 at 4:05
• Very interesting question and I’d love to find some actual benchmarks.. I’ve seen js-widgets that on load hydrates pretty large nested createElement structures with json data instead of using preloaded (and hidden) html templates to duplicate directly. But even that would probably loose out to innerHTML on a list view of say a few hundred items – Christoffer Bubach Commented Feb 14, 2022 at 9:12

3 Answers 3

Performance differences for this issue vary between browsers, and (sometimes) between different versions of any one browser, and I've seen a few different articles giving different advice on this issue.

In my own experience, I only recall one time that I really needed to make large changes to a big web page, specifically rebuilding a table element that had hundreds or potentially thousands of rows each of which had lots of cells, and I found that building up a string variable and then setting innerHTML once at the end was much, much faster than trying to do it through the DOM functions. But, this was for a particular intranet web app where it was guaranteed that 100% of the users would be on IE so I didn't need to worry about cross-browser testing.

Even if you decide to go the string-building route, there are different opinions about how to speed that up. I've read more than one article that pared the performance of continuously adding to the end of your string (standard myString += 'something' + 'something else' type operations) against appending to the end of an array variable and then using Array.join() to create one big string at the end. Again this made a big difference for certain versions of some browsers but was no different or worse in others.

innerHTML makes sense if you have large chunks of content to append to or fill an existing element.

Not that long ago, DOM methods were very much slower than assigning to an element's innerHTML property, but lately they are pretty quick and are just inconvenient because of all the required calls. But you can create helper functions that accept an object with all the information required to create an element to ease the burden.

There are some caveats to the use of innerHTML:

1. It is difficult to insert a number of sibling nodes between other siblings. To do this you end up inserting the HTML into some other element (e.g. a div) then moving the created elements into the DOM. Unfortunatly you can't use a documentFragment for this, so it requires iterating over child nodes
2. Using it on tables can be problemtatic, IE doesn't like modifying the innerHTML of various elements within a table other than TD
3. Browsers generate differnt HTML as the innerHTML property, so using it to serialise elements is problematic
4. Using the innerHTML property may delete listeners on other elements, even if they aren't modified by the innerHTML

e.g.

<div id="div0">div0</div>

<!-- Button to add a click listener to above div -->
<button onclick="
  var el = document.getElementById('div0');
  el.onclick = function(){alert(this.id);}
">Add listener as property</button>

<!-- Button to modify the body's innerHTML -->
<button onclick="
  var body = document.getElementsByTagName('body')[0];
  body.innerHTML += '';
">Append to body.innerHTML</button>

You can click on the first button to add a click listener to div0, but when you click on the second button (which appears to do nothing but in fact resets the innerHTML) the listener is removed.

I guess you have partially answered your own question.

The speed is not really affected unless you a very large chunk of html you want to insert using innerHTML. using createElement is more "DOM friendly" but you end up with lots more lines of code to make small changes sometimes.

Personally i use innerHTML or, whatever jQuery use with the .html() property. but when i have to use loops perform a plexe job i use the create element.

At the end it all es to be the same with unimportant performance differences. once the browser reflow the document, you can access your document the sameway.