javascript - 使用相同的类javascript创建多个div

Question

我是 JavaScript 的新手，想知道如何使用相同的类名动态创建多个 div。我有以下代码，但它只创建了一个 div 实例。

<div id="wrapper">
    <div id="container">
        <div id="board">
            <script>
                var board = document.createElement('div');
                board.className = "blah";

                for(x=0; x<9;x++) {
                document.getElementById('board').appendChild(board);
                }
            </script>
        </div>
    </div>
</div>

Answer 1

现在，您正在循环外部创建元素，并将那个元素附加到DOM ...一次又一次。

您要做的是在循环的每次迭代期间创建一个新元素。为此，请在循环内移动您创建新 div 的部分:

for(x=0; x<9;x++) {
    var board = document.createElement('div');
    board.className = "blah";

    document.getElementById('board').appendChild(board);
}

现在，每次循环运行时，您都将创建一个新元素，并将该元素附加到 ID 为 #board 的元素。

值得指出的是，您创建的变量 (board) 现在仅在此循环内有效。这意味着一旦循环完成，您将需要找到一种不同的方式来访问新元素，如果您需要修改它们的话。