使用 javascript 循環的另一個 div 內的 div

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 。 此外，您應該 append 在每次迭代中當前創建的注釋元素內的sec元素：

 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>