Estoy siguiendo un tutorial de Javascript y tengo que agregar 100 botones dentro de un div usando Javascript.
Al principio, intenté hacer algo como esto:
const btn = document.createElement('button'); const div = document.querySelector('div'); btn.innerText = 'Hey!'; for (let i = 0; i < 100; i++) { div.appendChild(btn); }Y esto terminó haciendo solo 1 botón. Sin embargo, si repito el mismo código, solo agrega botones después del anterior. Sin embargo, este enfoque:
for (let i = 0; i < 100; i++) { const btn = document.createElement('button'); const div = document.querySelector('div'); btn.innerText = 'Hey!'; div.appendChild(btn); }hace el trabajo. Parece que no puedo entender por qué el segundo funciona y el primero no.
Según tengo entendido, el primer enfoque parecía mejor porque no estaba haciendo las mismas variables una y otra vez. Sin embargo, eso solo termina en mí haciendo solo un botón en lugar de 100.
El primer ejemplo no funcionará, porque así es como funciona el método appendChild . Según MDN . Simplemente mueve el nodo/elemento de su posición actual a la especificada. Entonces, su primer ejemplo es simplemente renovar la posición de un solo nodo, porque ha creado solo un div
El segundo ejemplo crea div cada vez, por lo que es un elemento nuevo, que se almacena dentro de su elemento principal.
El código que crea el elemento es document.createElement y lo llamas en el primer ejemplo, por lo tanto, solo se crea un elemento.
appendChild no crea un elemento, agrega un elemento ya creado a algún padre.
Si ya está adjunto, entonces no hace nada.
porque en el primer caso está intentando agregar el mismo objeto DOM 100 veces, pero tiene que crear uno nuevo cada vez