Html:使用javascript时，"table“中的"div”呈现怪异

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>，因为有时我想填充多个行。有没有一种标准/推荐的方法来做到这一点？非常感谢!

由于杰克的回答，用<tbody>代替<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：

表元素现在也允许在任何tbody或tr元素之后包含tr。wc3表引用。

表元素不能包含任何其他元素的...implying。

Answer 2

这是因为您在prev中违反了表的结构。

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

您不能让tr直接在一个表中，您必须在div中创建另一个表，然后在div中使用tr，所以所发生的情况是当您试图在div内解析tr然后html解析器，或者您的浏览器正在通过从您的表中删除div来自动纠正您的结构时，您可以签入firebug，

现在，在第二个示例中，它以前不工作，因为不使用ur html解析器或浏览器将不能动态地为您更正结构，它将不允许您在div中添加tr并从结构中删除坏元素，并将数据直接放在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>