div inside another div with loop using javascript

Question

I'm trying to create 5 divs inside another 5 divs using loop in javascript. I have made the main divs but all small divs are created only in one main div and only three small divs are created. How to make one small div for one main div? The same thing must repeat 5 times.

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>

Ids have to be unqiue.

Andreas
– Andreas

2020-04-18 11:43:02 +00:00
Commented Apr 18, 2020 at 11:43 — Andreas
– Andreas, Commented Apr 18, 2020 at 11:43

Mamun · Accepted Answer · 2020-04-18 11:56:14Z

2

The attribute id must be unique in a document, use class instead. Also, you should append the sec element inside the currently created comments element in each iteration:

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>

edited Apr 18, 2020 at 11:56

answered Apr 18, 2020 at 11:46

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

div inside another div with loop using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related