JavaScript and DOM: Why "<table>" += "<tr><td></td></tr>" += "</table" doesn't work?

Question

In both of these, the string content is the same. If you do this:

 myDiv.innerHTML += "<table><tr><td>A</td><td>B</td></tr></table>";

You get a table with two columns.

If you do this:

 myDiv.innerHTML += "<table>";
 myDiv.innerHTML += "<tr>";
 myDiv.innerHTML += "<td>A</td>";
 myDiv.innerHTML += "<td>B</td>";
 myDiv.innerHTML += "</tr>";
 myDiv.innerHTML += "</table>";

You only get the <table></table> tags. No other markup is present.

Is this because JavaScript changes the meaning of the content to objects, then we are not adding the TD's to the Table object? Why would this be the case?

Answer 1

Because you're creating DOM elements each time when you set innerHTML, you need to create a complete (or at least valid) set of DOM elements, currently you're appending unclosed tags repeatedly which will result in....some wacky behavior.

The result of your test isn't always <table></table> either, it'll depend on the browser as to how it handles the invalid markup...but in pretty much every case you can expect an invalid result.

Here's a demo illustrating what the innerHTML is becoming as DOM elements are created.

Answer 2

After each edit of innerHTML, the browser attempts to make a complete set of HTML DOM objects.

So after step one you have:

<table></table>

Since the end tag is added by error recovery.

Then you try to

<table></table><tr>

And since you can't have a table row outside the table, error recovery discards it instead.

… and so on.

Answer 3

Don't append to innerHTML over and over like that. How do you expect it to be able to parse elements correctly if you don't add them in complete form? Should it just take a guess? After each append it will automatically resolve the closing tag, hence the wacky behavior. I understand you want to build your string like this for readability purposes, so how about this...

var str = "";
str += "<table>";
str += "<tr>";
str += "<td>A</td>";
str += "<td>B</td>";
str += "</tr>";
str += "</table>";

myDiv.innerHTML += str;