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..?
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>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
¿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') })