For 循环中的 ID Div

Question

在 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);
}

这是 Fiddle： http://jsfiddle.net/dmperkins74/5r01zyma/

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

谢谢，丹·P.

Answer 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 样式。那是个问题。 P.S。现在您可以根据需要添加 ID。

For 循环中的 ID Div

ID Divs in For Loops

javascript

for-loop

duplicates