Html：“table”中的“div”在使用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作为锚点，以便我可以使用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：

  

现在，table元素也允许在任何tbody或tr元素之后包含一个tfoot。wc3 table reference

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

Answer 2

这种情况正在发生，因为您违反了prev

中的表格结构

 <div>
<tr><td>Cell-21</td><td>Cell-22</td></tr>
</div> 

你不能在一个表中直接使用div而你必须在div中创建另一个表然后在div中使用tr，所以当你试图在div中解析tr然后html解析器或你的浏览器正在纠正你的结构时发生什么通过从你的表中取出div，你可以检查firebug，

现在在第二个例子中它以前没有工作，因为不是你的html解析器或浏览器不会动态地纠正你的结构它只是不允许你在div中添加tr并从结构中删除坏元素并直接放入数据div不在div里面的tr

Answer 3

如果将表的内容保存到变量，添加要添加的行，该怎么办？然后用所述变量覆盖innerHTML。这样你就可以在那里消除div的使用。

澄清这样的事情：

<table id="table">
    <tr><td>Cell-11</td><td>Cell-12</td></tr>
</table>
<script>
    <!-- store the contents of your table -->
    var table = document.getElementById("table");
    var current = table.innerHTML;

    <!-- append the new cells -->
    current += "<tr><td>Cell-13</td><td>Cell-14</td></tr>";

    <!-- overwrite the innerHTML with the new data -->
    table.innerHTML = current;
</script>