Creating Multiple DIVS through the DOM and appending to them to the main DIV

Question

I trying to create 121 divs through the DOM, and append to the .container div

const container= document.querySelector('.container');
const divNumber= 121;
for (let i= 0; i<= 121; i++){
  const divs= document.createElement('div');
  divs.classList.add('items');
  container.appendChild(divs);
}

.container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
}
.items {
  border: 1px solid black;
  margin: 0px;
}

<div class='container'></div>

Nothing seems to happen on the webpage. How can I make 11 by 11 which equals 121 divs through the DOM and append them to the parent div, .container in this case?

The loop creates 122 `
`s, not 121; use `i < 121`. Why do you call your variable `divs` if it’s only a single `
`? Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Is your ` — Sebastian Simon, Feb 23 '22 at 14:18

score 0 · Accepted Answer · answered Feb 23 '22 at 14:31

All grids are overlapping. Add grid-gap property

const container = document.querySelector('.container');
const divNumber = 121;
for (let i = 0; i < 121; i++) {
  const divs = document.createElement('div');
  divs.classList.add('items');
  divs.innerHTML = i + 1
  container.appendChild(divs);
}

.container {
  display: grid;
  grid-template-columns: repeat(11,1fr);
  grid-gap: 20px;
}

.items {
  border: 1px solid black;
  margin: 0px;
  padding: 5px;
  color: green;
}

<div class='container'></div>

Creating Multiple DIVS through the DOM and appending to them to the main DIV

1 Answers1