HTML：使用JavaScript时，“表格”中的“ div”呈现怪异

Question

I'm pretty new to html/javascript. So please forgive my rookie question.

Suppose I insert a div inside the table:

<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>

The code renders fine

However, if I use a script to fill the 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>

the table has a weird rendering:

Any idea why this is happening?

My goal here is to use div as an anchor so that I can fill in custom row(s) with javascript, and I don't want to use <tr id="fill"></tr> because I sometimes want to fill more than one rows. Is there a standard/recommended way of doing this? Thanks a lot!

---

Thanks to Jake's answer, replacing <div> with <tbody> seems to allow me do what I have in mind.

<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

When I try this in jsfiddle, ( http://jsfiddle.net/318xjqsu/ ) and then view the source, I see that the manipulated DOM looks like:

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

</tbody></table>

So you can see that the javascript is being inserted before the table. I believe this is because it is invalid to have a <div> inside the <table> element. From the w3C:

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

...implying that the table element cannot contain any other element.

Answer 2

This is happening because you are violating the structure of table in your prev

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

you can not have tr inside div directly in a table u have to make another table inside div then use tr inside div, so whats happening is when you trying to parse tr inside div then html parser or your browser is correcting you structure automatically by taking div out of ur table you can check in firebug ,

Now in second example it not working previous because not ur html parser or browser will not correct the structure for you dynamically it will simply wont allow you to add tr inside div and remove bad element from the structure and place the data directly in div not in tr inside div

Answer 3

What if you saved the content of your table to a variable, add the rows you want to add. And then overwrite the innerHTML with said variable. That way you eliminate the use of a div there.

To clarify something like this:

<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>