为什么当我调用这个函数时我的表没有生成？

Question

我正在尝试生成一个有 2 行的表格，每行有 4 个单元格。每个单元格都应该包含一个图像。我究竟做错了什么？当我调用我的函数时，什么也没有发生。

function generateTable()
{

    var table = document.createElement("TABLE");
    table.setAttribute("id", "gameBoard");

    var row1 = document.createElement("TR");
    row1.setAttribute("id", "r1");

    table.appendChild(row1);

    for (var i = 0; i < 4; i++)
    {
        var card = document.createElement("TD");
        var card_img = document.createElement('img');
        card_img.setAttribute("img", "images/card_back.png");
        card.appendChild(card_img);

        row1.appendChild(card);
    }

    var row2 = document.createElement("TR");
    row2.setAttribute("id", "r2");

    table.appendChild(row2);


    for (var j = 0; j < 4; j++)
    {
        var card = document.createElement("TD");
        var card_img = document.createElement('img');
        card_img.setAttribute("img", "images/card_back.png");
        card.appendChild(card_img);

        row2.appendChild(card);
    }

}

Answer 1

最后您必须执行document.appendChild(table);，因为您没有将元素添加到页面（您可能认为您使用document.createElement 执行此操作，但这不会向 DOM 添加任何内容）。

如果您想将其添加到特定元素，那么我会修改您的函数以接受包含您的游戏板的 div 的 id 的参数。

generateTable(elementId) { ... }

最后：

let toAdd = document.getElementById(elementId);
toAdd.appendChild(table);