Adding elements as a string vs. createElement()

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