附加到 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>