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

Question

在这两者中，字符串内容是相同的。如果你这样做:

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

您得到一个包含两列的表格。

如果你这样做:

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

你只会得到 <table></table>标签。不存在其他标记。

这是因为 JavaScript 将内容的含义更改为对象，所以我们没有将 TD 添加到 Table 对象中吗？为什么会这样？

Answer 1

每次编辑 innerHTML 后，浏览器都会尝试生成一组完整的 HTML DOM 对象。

所以在第一步之后你有:

<table></table>

由于结束标签是通过错误恢复添加的。

然后你尝试

<table></table><tr>

并且由于您不能在表外有表行，因此错误恢复会将其丢弃。

……等等。