Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

344
Visualizações
How to create many divs without actually creating them individually

I'm working on a project with html, css and js and I want to create many divs (let's say, 200) so, how can i create them without actually writing code for 200 different divs... I know I can do it with js but could I do it only with html and css..?

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

As I already said in my comment, you can't do it without JavaScript.
A JavaScript solution would be the following:

const container = document.getElementById("container");

for (let i = 0; i < 200; i++) {
  const item = document.createElement("div");

  item.classList.add("item", "item-" + i);

  container.appendChild(item);
}
#container {
  border: 1px solid red;
  padding: .5rem;
}

.item {
  border: 1px solid black;
  height: 3rem;
  margin-bottom: .3rem;
}
<div id="container">
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

One way with js: you can create one HTML Span Element and with js you change the content of it. I bet with that knowledge you find something

about 4 years ago · Juan Pablo Isaza Relatório

0

how it's going? Html or css is not a programming language. So you can't do some kind of automation or repeating code or something like that. The only way to do that sort of things is using Javascript. Here is how:

<div class="container">
  <!-- let's say we trying to add divs here. -->
</div>

And here's script:

function addMultiple (where, what, count, callBack) {
  for (let i = 0; i < count; i++) {
    // creating elements with document.createElement() method
    let item = document.createElement(what)
    // and then adding them into "where" element.
    where.appendChild(item)
    
   /*
    and finally we'll have a function called Callback.
    This is just gonna take our item as an argument and 
    do some stuff on it according to what we want.
    (I'll show a simple usage down below)
    */
   callBack(item)
  }
}

// let's say we want to add 200 divs into "container" element 
// and then we want to add class name to those divs.

const container = document.querySelector('.container')
addMultiple(container, 'div', 200, item => {
  // this code will be repeated for all divs.
  item.classList.add('what_ever_you_want')
})
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda