For 循环中的 ID Div答案

【问题标题】：ID Divs in For LoopsFor 循环中的 ID Div
【发布时间】：2015-05-20 14:56:17
【问题描述】：

使用 Javascript。我正在尝试复制一个 div 并在 fo 中动态命名它。以下两种方法似乎都不起作用：

var origDiv = document.getElementById("outerSquare");
for (i=1; i<=4; ++i){
    newDiv = document.body.appendChild(origDiv.cloneNode(true));
//  newDiv.id = "block"+i;
    newDiv.setAttribute("id", "block"+i);
}

这是小提琴： http://jsfiddle.net/dmperkins74/5r01zyma/

有趣的是，它似乎只是在我的“outerSquare”中复制了 div。如果我删除重置 ID 的尝试，一切都会失败。任何见解将不胜感激。

谢谢，丹·P.

【问题讨论】：

它工作正常，我可以看到？什么问题？
因为它复制了“outerSquare”，所以我应该得到 4 个新的红色方块，每个中间都有一个红色方块。如果您注释掉“setAttribute”行，它会按照我期望的方式运行，但目前，除了右侧的原始块之外，我看到的只有 4 个堆叠的黑框。
这可以满足您的要求 - 您可以使用浏览器的开发人员工具轻松检查。只有为 #outerSquare 定义的样式显然不再适用，因为您更改了 id。并且内部元素仍然都有 id innerSquare，因为你根本没有改变那个，所以你最终会得到多个具有相同 id 的元素，你应该避免这种情况。

标签： javascript for-loop duplicates

【解决方案1】：

使用类：

<div class="outerSquare">
<div class="innerSquare"></div>
</div>

var origDiv = document.getElementsByClassName("outerSquare")[0];

for (i=1; i<=4; ++i){
    newDiv = document.body.appendChild(origDiv.cloneNode(true));
    newDiv.style.left = i*40 +"px";
    newDiv.style.top = i*40 +"px";
//  newDiv.id = "block"+i;
   //newDiv.setAttribute("id", "block"+i);
}

origDiv.style.left = "200px";

block2.style.left = "400px";

http://jsfiddle.net/5r01zyma/3/ 没有 id 重复，没有样式问题。

通过更改 ID，您无法应用旧的 css 样式。那是个问题。附言现在您可以根据需要添加 id。

【讨论】：

你让我大吃一惊。甚至不知道我可以只为一个 div 上课。伙计，我有很多东西要学。非常感谢:)