按钮没有放置在html div位置

Question

我有一个 JavaScript 生成的表，用户可以与之交互。在表格下方，生成后，应该显示一个按钮，因此在我的 css 文件中 init 之后有

display: none

。

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

}

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

使用此代码，按钮在生成表格后显示，但它始终显示在表格上方。按钮的 div 放在下面，按钮也应该放在下面吗？

我首先使用javascript创建了整个表格，但是在遇到这个问题之后，我尝试通过在html文件中明确定位div容器来解决它。但这也行不通。

是否有任何 JavaScript/HTML 特定的事情会导致这种行为？

Answer 1

您已选择现有表格：

const tbl = document.getElementById("table")

因为你这样称呼：

document.body.appendChild(tbl)

删除这个。您正在将桌子移动到机身底部，按钮后面。