1

Básicamente tengo este código HTML:

  <body>
    <div1>hola
      <div2>radiola1</div2>
      <div3>radiola2</div3>
    </div1>
  </body>

Pero solo logro hacer esto con código Javascript:

var div1 = document.createElement('div1');
var div2 = document.createTextNode('div2');
var div3 = document.createTextNode('div3');
document.body.appendChild(div1);
document.body.appendChild(div2);
document.body.appendChild(div3);

Al hacerlo así los DIVs no quedan anidados. Qué tengo que hacer para anidar etiquetas en javascript?

1
  • ¿Alguna respuesta solucionó tu problema? Por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda!
    – Marcos
    Commented el 17 may. 2021 a las 12:32

2 respuestas 2

1

Para que queden anidados deben tener la relación apropiada entre sí. Este código es un ejemplo. La parte que interesa es la que está dentro de la función myFunction

<!DOCTYPE html>
<html>

<head>
  <script>
    function myFunction() {
      var div1 = document.createElement('div');

      var div2 = document.createElement('div')
      div2.appendChild(document.createTextNode('radiola1'));

      var div3 = document.createElement('div')
      div3.appendChild(document.createTextNode('radiola2'));

      div1.appendChild(div2);
      div1.appendChild(div3);

      document.body.appendChild(div1);
    }
  </script>
</head>

<body>

  <h1>Página de pruebas</h1>
  <p id="demo">Prueba:</p>
  <button type="button" onclick="myFunction()">Probar código</button>

</body>

</html>

Los nodos los creas con document.createElement y luego los adicionas al elemento en el que van con el método appendChild.

Al pulsar el botón te adiciona los elementos al final del documento. La primera vez quedan después del <button>.

0

Para que div2 y div3 queden anidados dentro de div1, necesitas agregarlos a div1 (no al body)

Ejemplo:

var div1 = document.createElement('div1');
div1.innerText = 'hola';
var div2 = document.createElement('div2');
div2.innerText = 'radiola1';
var div3 = document.createElement('div3');
div3.innerText = 'radiola2';

div1.appendChild(div2);
div1.appendChild(div3);
document.body.appendChild(div1);
div1 {
  border: 3px solid red;
}
div2 {
  border: 2px solid green;
}
div3 {
  border: 2px solid blue;
}

1
  • Gracias, ahora lo tengo claro
    – Storko
    Commented el 16 may. 2021 a las 15:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.