Inner workings innerHTML

Question

I tried iteratively changing the innerHTML of the identifier, for example:

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

and

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

but I found that this did not necessarily bring my tags in sequence.

Of course, this method sucks, and I just changed everything to continue adding the line that I assign at the end of the innerHTML identifier.

My question is:

What exactly does innerHTML do with the tags I embed, is it deterministic, browser specific?

Answer 1

In my experience, most of the time the browser tries to fix HTML ¹ before injecting it into the DOM. If you want to build <ul> as follows:

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

In particular, Chrome, which would lead to:

 <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 adjusted by the browser (and browsers differ in how they do it). This is especially true for table / table elements (and even more so in IE (MS came up with innerHTML way;)). If you want your html to be exactly what you expected it to, stick to the DOM methods ( createElement / appendChild , etc.) Or first create a line of the full element that you want to insert using innerHTML, then in other words, don't use innerHTML with lines containing incomplete HTML.

To be complete, I quote the PPC quirksmode :

If you delete elements via innerHTML in IE, their contents are wiped and only the element itself (i.e. opening and closing labels) remains. If you want to remove nodes that you might want to reinsert later, use DOM methods such as RemoveChild ()

^{1 is} more technical: I think that every browser uses its own HTML fragment analysis algorithm .

Answer 2

InnerHTML does nothing, but the browser is free to change the situation, but he likes it. This can be seen if you open the page in Firefox and open Firebug with it. When you view your HTML, you may find that some elements no longer exist.

Firefox's most unexpected action for beginners is to change all the HTML to what XHTML seems to be.

As for your method, I don't think this sucks. In fact, I think it's pretty cool. So thanks!

And you have upvote for this :-)

Answer 3

Although innerHTML is not part of the w3c DOM, it is supported by all browsers. Initially, it simply added a string like-to-this to your element. However, all major browsers modify your line and make the line the correct html markup. It is browser specific and not explicitly defined in any official standard. I like the way Mozilla explains innerHTML.

Answer 4

I encountered a similar problem recently. Since there was no available documentation, I had to learn from experience. Here it goes.

Browsers seem to parse innerHTML as soon as any corrections are made. Thanks to this parsing, any invalid HTML fragment will be dropped / added and added to the actual fragment!

Moral of the story : whenever you modify innerHTML, make sure that the HTML you enter is valid. So ...innerHTML += "<table> ... </table>" should work fine, but ...innerHTML += "<table>"; ... .innerHTML += "<\table>" ...innerHTML += "<table>"; ... .innerHTML += "<\table>" will likely lead to unexpected behavior.

This is because in the latter case, as soon as you insert <table> , the browser parses the line and adds the full node (thus completing your incomplete code). Therefore, everything that you add later will be displayed as the sibling of the node table, and not as a child, as you originally intended.