JavaScript和DOM:为什么"<table>"+ ="<tr> <td> </ td> </ tr>"+ ="</ table"不起作用?

Zac*_*ott 3 javascript dom

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

 myDiv.innerHTML += "<table><tr><td>A</td><td>B</td></tr></table>";
Run Code Online (Sandbox Code Playgroud)

你得到一个有两列的表.

如果你这样做:

 myDiv.innerHTML += "<table>";
 myDiv.innerHTML += "<tr>";
 myDiv.innerHTML += "<td>A</td>";
 myDiv.innerHTML += "<td>B</td>";
 myDiv.innerHTML += "</tr>";
 myDiv.innerHTML += "</table>";
Run Code Online (Sandbox Code Playgroud)

你只得到<table></table>标签.没有其他标记存在.

这是因为JavaScript将内容的含义更改为对象,那么我们是不是将TD添加到Table对象中?为什么会这样呢?

Que*_*tin 7

在每次编辑innerHTML之后,浏览器会尝试创建一组完整的HTML DOM对象.

所以在第一步之后你有:

<table></table>
Run Code Online (Sandbox Code Playgroud)

由于错误恢复添加了结束标记.

然后你试着

<table></table><tr>
Run Code Online (Sandbox Code Playgroud)

由于您不能在表外部有一个表行,因此错误恢复会丢弃它.

… 等等.