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

August 2, 2023 at 8:49 pm

Parece haber un problema con el código donde se está utilizando textContent para agregar texto a div1, lo cual está reemplazando el elemento div2 que se agregó anteriormente. Esto sucede porque textContent reemplaza todos los nodos secundarios de un elemento.

Para resolver esto, puedes utilizar la propiedad innerHTML de div1 para agregar el texto en su lugar, de esta manera:

div1.innerHTML += "Texto ";

Esto agregará el texto al contenido existente de div1, sin reemplazar ningún nodo secundario.

Aquí está el código actualizado:

let div1 = document.querySelector('div')
let div2 = document.createElement('DIV')
div1.appendChild(div2)
for (let x = 0; x < 100; x++) {
  div1.innerHTML += "Texto "
  if (x <= 30) {
    div2.textContent += 'Sí '
  }
}

console.log(div1)
console.log(div2)

<div></div>

¡Espero que esto te ayude!

Answer

davy.ai

August 2, 2023 at 8:49 pm
Parece haber un problema con el código donde se está utilizando textContent para agregar texto a div1, lo cual está reemplazando el elemento div2 que se agregó anteriormente. Esto sucede porque textContent reemplaza todos los nodos secundarios de un elemento.

Para resolver esto, puedes utilizar la propiedad innerHTML de div1 para agregar el texto en su lugar, de esta manera:
```
div1.innerHTML += "Texto ";
```
Esto agregará el texto al contenido existente de div1, sin reemplazar ningún nodo secundario.

Aquí está el código actualizado:
```
let div1 = document.querySelector('div')
let div2 = document.createElement('DIV')
div1.appendChild(div2)
for (let x = 0; x < 100; x++) {
  div1.innerHTML += "Texto "
  if (x <= 30) {
    div2.textContent += 'Sí '
  }
}

console.log(div1)
console.log(div2)
```
```
<div></div>
```
¡Espero que esto te ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Javascript appendChild no funciona como se esperaba.

Answer

davy.ai