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>

由于您不能在表格之外放置一个表格行，因此错误恢复会丢弃它。

......等等。

Answer 2

不要像那样反复追加innerHTML。如果不以完整形式添加元素，您如何期望它能够正确解析元素？它应该只是猜测吗？每次追加后它会自动解析结束标记，因此是古怪的行为。我知道你想为了可读性目的而构建你的字符串，那么这个怎么样......

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

myDiv.innerHTML += str;

Answer 3

因为您在设置innerHTML时创建了每次元素，所以您需要创建一个完整（或至少是有效的）DOM集元素，目前你反复附加未封闭的标签，这将导致......一些古怪的行为。

您的测试结果也不总是<table></table>，它取决于浏览器如何处理无效标记......但几乎在每种情况下您都可能会得到无效结果。

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

JavaScript和DOM：为什么“”+ =“”+ =“<table> <tbody> <tr> <td> </td> </tr> </tbody> </table>

3 个答案: