Adding elements as a string vs. createElement()

Question

For what I want to accomplish, 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.

Answer 1

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 compared 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.

Answer 2

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.

Answer 3

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 complexe job i use the create element.

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