javascript - 创建对象并将其附加到动态创建的对象

Question

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

我想创建九个 div，然后将九个 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 个 div 的 9 个分组，这些分组被标记为类名“square”，每个分组内的 div 被标记为类名“pixel”，但事实并非如此。仅创建一个“bigSquare”div(包含九个“pixel”div)，而不是我想要的九个。我觉得每个新的“bigSquare”div 的创建只是简单地用循环的每次迭代替换前一个，但我不确定。正是这种情况，我不知道如何解决它......有什么帮助吗？我试图描述这一点的方式可能相当令人困惑:/

Answer 1

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