创建对象并将它们附加到动态创建的对象

Question

我已经在 Google 周围搜索了一段时间，似乎找不到我这个问题的答案。我对 js 也有些陌生，所以可能有更简单的方法或明显缺少的东西。这是我正在做的事情：

我想创建九个 div，然后将九个 div 放入原来的九个中。我有以下功能：

function createDivs() {
       for(i = 0; i < 9; ++i) {
             var bigSquare = document.createElement("div");
             document.body.appendChild(bigSquare);
             bigSquare.className = "square";
             for(i = 0; i < 9; ++i) {
                 var smallSquare = document.createElement("div");
                 smallSquare.className = "pixel";
                 bigSquare.appendChild(smallSquare);
             }
       }
}

我认为这会创建 9 个分组，每组 9 个 div，这些分组被标记为 class 名称 "square"，每个分组中的 div 被标记为标有 class 名称 "pixel"，但事实并非如此。只创建了一个 "bigSquare" div（包含九个 "pixel" div），而不是我想要的九个。我觉得好像每个新的 "bigSquare" div 的创建只是用循环的每次迭代替换前一个，但我不确定。就是这样，我不确定如何解决它……有什么帮助吗？我试图描述这一点的方式可能非常令人困惑：/

Answer 1

问题是您为外循环和内循环重新使用了循环迭代变量 i。将其中之一更改为 j 或其他内容，您的代码应该可以工作。

Answer 2

您需要在每个循环中声明和更改您的变量，否则初始变量 i 只会在您进入内部循环时更改。像这样做：

function createDivs() {
    for (var i = 0; i < 9; i++) {
        var bigSquare = document.createElement("div");
        document.body.appendChild(bigSquare);
        bigSquare.className = "square";
        for (var k = 0; k < 9; k++) {
            var smallSquare = document.createElement("div");
            smallSquare.className = "pixel";
            bigSquare.appendChild(smallSquare);
        }
    }
}

Answer 3

哎呀。您正在重用 "i" 内部和 "i" 循环。切换变量！

function createDivs() {
       for(var i = 0; i < 9; ++i) {
             var bigSquare = document.createElement("div");
             document.body.appendChild(bigSquare);
             bigSquare.className = "square";
             for(var j = 0; j < 9; ++j) {
                 var smallSquare = document.createElement("div");
                 smallSquare.className = "pixel";
                 bigSquare.appendChild(smallSquare);
             }
       }
}

创建对象并将它们附加到动态创建的对象

Creating Objects and Appending Them to Dynamically Created Objects

html

javascript

createelement