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

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.