javascript - Html: "div"inside "table"在使用 javascript 时呈现奇怪的效果

Question

我对 html/javascript 还很陌生。所以请原谅我的菜鸟问题。

假设我插入一个 div表内:

<table border="1">
  <tr><td>Cell-11</td><td>Cell-12</td></tr>
  <div>
    <tr><td>Cell-21</td><td>Cell-22</td></tr>
  </div>
</table>

代码渲染良好

但是，如果我使用脚本来填充div

<table border="1">
  <tr><td>Cell-11</td><td>Cell-12</td></tr>
  <div id="fill"></div>
</table>
<script>
 document.getElementById("fill").innerHTML="<tr><td>Cell-21</td><td>Cell-22</td></tr>";
</script>

该表有一个奇怪的渲染:

知道为什么会发生这种情况吗？

我的目标是使用div作为 anchor ，以便我可以使用 javascript 填充自定义行，并且我不想使用 <tr id="fill"></tr>因为我有时想填充不止一行。有没有标准/推荐的方法来做到这一点？非常感谢!

<小时/>

感谢 Jake 的回答，替换 <div>与 <tbody>似乎允许我做我想做的事。

<table border="1">
  <tr><td>Cell-11</td><td>Cell-12</td></tr>
  <tbody id="fill"></tbody>
</table>
<script>
 document.getElementById("fill").innerHTML="<tr><td>Cell-21</td><td>Cell-22</td></tr>";
</script>

Answer 1

当我在 jsfiddle ( http://jsfiddle.net/318xjqsu/ ) 中尝试这个，然后查看源代码时，我看到被操纵的 DOM 看起来像:

<div id="fill">Cell-21Cell-22</div><table border="1">
<tbody><tr><td>Cell-11</td><td>Cell-12</td></tr>

</tbody></table>

因此您可以看到 JavaScript 被插入到表格之前。我相信这是因为 <div> 是无效的。里面<table>元素。来自 w3C:

the table element is now also alternatively allowed to contain a tfoot after any tbody or tr elements.wc3 table reference

...暗示表格元素不能包含任何其他元素。