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

【问题标题】：Creating Objects and Appending Them to Dynamically Created Objects创建对象并将它们附加到动态创建的对象
【发布时间】：2015-02-17 10:51:36
【问题描述】：

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

我想创建 9 个 div，然后将 9 个 div 放入原来的 9 个 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 的分组，这些分组被标记为类名“square”，每个分组中的 div 被标记为类名“pixel”，但事实并非如此。只创建了一个“bigSquare”div（包含九个“像素”div），而不是我想要的九个。我觉得好像每个新的“bigSquare” div 的创建只是用循环的每次迭代替换前一个，但我不确定。情况就是这样，我不知道如何解决它......有什么帮助吗？我试图描述这一点的方式可能很令人困惑：/

【问题讨论】：

标签： javascript html createelement

【解决方案1】：

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

【讨论】：

我知道它必须是一些简单的东西......非常感谢！

【解决方案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);
        }
    }
}

【讨论】：

解释被声明的隐式变量以及为什么它不好，你会得到我的支持

【解决方案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);
             }
       }
}

【讨论】：