Javascript appendChild no funciona como se esperaba.
Tengo el siguiente código simple en el que intento crear un div
dentro de otro div
usando appendChild
.
let div1 = document.querySelector('div')
let div2 = document.createElement('DIV')
div1.appendChild(div2)
for (let x = 0; x < 100; x++) {
div1.textContent += "Text "
if (x <= 30) {
div2.textContent += 'Yes '
}
}
console.log(div1)
console.log(div2)
<div></div>
No estoy seguro de por qué este código no funciona. El div
ya ha sido creado pero simplemente no se está agregando al div1
.
¿Alguien podría explicarme qué está mal con appendChild
? Creo que no hay ningún problema de sintaxis con appendChild
.
¡Gracias por cualquier respuesta!
davy.ai
Parece haber un problema con el código donde se está utilizando
textContent
para agregar texto adiv1
, lo cual está reemplazando el elementodiv2
que se agregó anteriormente. Esto sucede porquetextContent
reemplaza todos los nodos secundarios de un elemento.Para resolver esto, puedes utilizar la propiedad
innerHTML
dediv1
para agregar el texto en su lugar, de esta manera:Esto agregará el texto al contenido existente de
div1
, sin reemplazar ningún nodo secundario.Aquí está el código actualizado:
¡Espero que esto te ayude!