Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

343
Views
Cómo crear muchos divs sin crearlos individualmente

Estoy trabajando en un proyecto con html, css y js y quiero crear muchos divs (digamos, 200), entonces, ¿cómo puedo crearlos sin escribir código para 200 divs diferentes? Sé que puedo hacerlo con js pero podría hacerlo solo con html y css..?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Como ya dije en mi comentario, no puedes hacerlo sin JavaScript.
Una solución JavaScript sería la siguiente:

 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 Report

0

Una forma con js: puede crear un elemento HTML Span y con js puede cambiar su contenido. Apuesto a que con ese conocimiento encuentras algo

about 4 years ago · Juan Pablo Isaza Report

0

¿cómo va? Html o css no es un lenguaje de programación. Entonces no puedes hacer algún tipo de automatización o código repetido o algo así. La única forma de hacer ese tipo de cosas es usando Javascript. Aquí es cómo:

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

Y aquí está el guión:

 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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!