div 在另一个 div 中使用 javascript 进行循环

Question

我正在尝试使用 javascript 中的循环在另外 5 个 div 中创建 5 个 div。我已经制作了主 div，但所有小 div 均仅在一个主 div 中创建，并且仅创建了三个小 div。如何为一个主div制作一个小div？同样的事情必须重复5次。for(let n=0; n<5; n++){  var elm = document.createElement('div');  elm.id="comments";  document.getElementById('elm').appendChild(elm);  var sec = document.createElement('div');  sec.id = "sec";  document.getElementById('comments').appendChild(sec);}#elm{  width: 90vw;  height: 90vh;  background: blue; }#comments{  background: brown;  width: 100%;  height: 150px;  border: 2px solid yellow; }#sec{  width: 50px;  height: 50px;  background: chartreuse;  z-index: 1000;  border: 2px solid darkgreen; }<div id="elm"></div>

Answer 1

该属性id在文档中必须是唯一的，class请改为使用。此外，您应该在每次迭代中将sec元素附加到当前创建的comments元素内：

for(let n=0; n<5; n++){

  var elm = document.createElement('div');

  elm.setAttribute('class',"comments");

  document.getElementById('elm').appendChild(elm);

  var sec = document.createElement('div');

  sec.setAttribute('class', "sec");

  elm.appendChild(sec); // append the sec element inside the current comments element

}

#elm{

  width: 90vw;

  height: 90vh;

  background: blue;

}

.comments{

  background: brown;

  width: 100%;

  height: 150px;

  border: 2px solid yellow;

}

.sec{

  width: 50px;

  height: 50px;

  background: chartreuse;

  z-index: 1000;

  border: 2px solid darkgreen;

}

<div id="elm"></div>