附加到tbody附加到顶部？

Question

我得到一个奇怪的结果附加到一个tbody。有时它会附加在顶部，其他时候都会附加到顶部和底部。

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

但在我的网站上，它附在表格的顶部：

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>");

为什么将按钮行追加到表格顶部而不是底部？

Answer 1

修改
正如CBroe在评论中所述，caption标签不能作为孩子放在桌子内。（由CBroe链接：Code Check）
您还没有关闭form标签

问题是，在您的网站上，您有2个tbody，而#form在所有输入之前 来自萤火虫：

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