Search code examples
javascriptinnerhtml

Inner workings of innerHTML

I was trying to iteratively change the innerHTML of an Id, like:

document.getElementById("test").innerHTML += "<br />"

and

document.getElementById("test").innerHTML += "<table>" + blahblah + "</table>"

but I found that it didn't necessarily put my tags in sequence.

Of course, this method sucks, and I just changed everything to keep adding to a string, which I assign at the end to the innerHTML of the Id.

My question is:

What exactly is innerHTML doing to the tags I'm inserting, is it deterministic, is it brower-specific?

Solution

  • In my experience most of the time a browser tries to correct the HTML1 before injecting it into the DOM. If you wanted to build a <ul> this way:

    someElement.innerHTML += '<ul>';
someElement.innerHTML += '<li>some li</li>';
someElement.innerHTML += '<li>some other li</li>';
someElement.innerHTML += '</ul>';

    In for example Chrome that would have resulted in:

    <ul></ul>
 <li>some li</li>
 <li>some other li</li>
<ul></ul>

    So, innerHTML can give unpredictable results, because every time you use it, the HTML is corrected by the browser (and browsers differ in the way they do it too). This is especially true for table/table elements (and even more especially so in IE (MS invented innerHTML by the way;)). If you want your html to be absolutely the way you intended it, stick to DOM methods (createElement/appendChild etc.), or first build up a string of the complete element you want to insert using innerHTML, then insert it, in other words, don't use innerHTML with strings containing incomplete HTML.

    To be complete I cite from PPK's quirksmode:

    If you remove elements through innerHTML in IE, their content is wiped and only the element itself (i.e. opening and closing tags) remain. If you want to remove nodes that you may want to reinsert at a later time, use DOM methods such as removeChild()

    1 more technical: I think every browser applies its own HTML fragment parsing algorithm.