附加到 tbody 附加到顶部？

Question

我在 tbody 上附加了奇怪的结果。有时它会附加到顶部，有时会附加到顶部和底部。

这个 jsfiddle 显示附加到 tbody 位于底部：https://jsfiddle.net/dxnw34bb/

但在我的网站上，它附加到 table:

的顶部

http://tx.rxtron.com/restore.php （将最后一个输入框（存储槽）的值改为5）

我网站上的代码是：

$('tbody#form').append("<tr class='storage-contents' id='slot-"+i+"'><td>Slot "+(i+1)+":</td> <td>"+ "<button id='potion-"+i+"'>Potion</button>"+ "<button id='ring-"+i+"'>Ring</button>"+ "<button id='wand-"+i+"'>Wand</button> <button id='empty-"+i+"'>Empty</button></td></tr>");

为什么将按钮行附加到 table 的顶部而不是底部？

Answer 1

编辑
正如 CBroe 在评论中所述，caption 标记不能作为子项放置在 table 内。（CBroe 的link：Code Check）
另外你还没有关闭 form 标签

问题是在您的网站上您有 2 个 tbody，而#form 在包含所有输入的那个之前。
来自 firebug:

<table>
    <tbody id="form"> </tbody>
    <caption>Restore Stats</caption>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
            <td>Storage Slots:</td>
            <td>
            <td class="tip">The size of your storage box</td>
        </tr>
    </tbody>
</table>

附加到 tbody 附加到顶部？

Appending to tbody appends to the top?

jquery

html-table