JavaScript生成表格后按钮位置异常：按钮显示于表格上方求助

我通过JavaScript生成了一个用户可交互的表格，期望表格生成后，将CSS初始设置为display:none的「Ereigniskarten」按钮显示在表格下方。但目前按钮虽能正常显示，却始终出现在表格上方。我已尝试在HTML中明确布局div容器，但问题仍未解决。请问是否存在JavaScript/HTML相关特性导致该现象？

附截图：

相关代码 #

JavaScript代码 #

function createTable(row, col, playerNames) {
    const tbl = document.getElementById("table")
    const tblBody = document.getElementById("tbody")

    // Creating cells
    for (let i = 0; i < row; i++) {
        const row = document.createElement("tr")

        for (let j = 0; j < col; j++) {
            const cell = document.createElement("td")
            if (i == 0 && j == 0) {
                // Create "Runden" cell
                const cellText = document.createTextNode("Runden")
                cell.appendChild(cellText)
            } else if (i == 0 && j != 0) {
                // Create cells with player names in first row
                const cellText = document.createTextNode(playerNames[j])
                cell.appendChild(cellText)
            } else if (i != 0 && j == 0) {
                // Create round counter cells
                const cellText = document.createTextNode(String(i))
                cell.appendChild(cellText)
            } else {
                // Create rest of the cells
                cell.contentEditable = "true"
            }
            row.appendChild(cell)
        }
        if (tblBody) {
            tblBody.appendChild(row)
        }
    }
    if (tbl) {
        // @ts-ignore        
        tbl.appendChild(tblBody)
    }
    // @ts-ignore
    document.body.appendChild(tbl)

    addSumRowToTable(col)

    addEventListenerToTableDataCells()
    
    displayEventCardsButton()
}

function displayEventCardsButton() {
    let eventCardButton = document.getElementById("event_cards")

    if (eventCardButton) {
        eventCardButton.style.display = "block"
    }

}

HTML代码 #

<div id="player_count_heading">Anzahl der Spieler eingeben</div>
 <div>
     <table id="table">
         <tbody id="tbody"></tbody>
     </table>
 </div>

 <div class="buttons">
     <button id="player_count" type="button">Spieleranzahl</button>
     <button id="event_cards" type="button">Ereigniskarten</button>
 </div>
  
 <script src="js/frantic.js"></script>

问题出在createTable函数里的document.body.appendChild(tbl)这行代码。

原本表格已经存在于HTML结构中（在按钮所在div的上方容器里），但你通过这行代码把表格从原来的DOM位置移除，追加到了document.body的末尾，也就是按钮所在div的后面。DOM渲染是按顺序执行的，所以按钮自然就跑到表格上方了。

直接删除document.body.appendChild(tbl)这行代码即可。

表格本身已经在初始HTML结构里，你只需要向它的<tbody>添加行内容，不需要重新将其追加到body末尾。删除后，表格会保留在原来的位置，按钮就会显示在表格下方了。

内容的提问来源于stack exchange，提问作者Cats