Autor Tema: Ejercicios resueltos JavaScript Crear div con appendChild anidados fin CU01140E  (Leído 744 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Solución propuesta para el ejercicio CU01140E del tutorial de programación JavaScript con ejercicios resueltos de aprenderaprogramar.

Citar
Crea una página web donde inicialmente exista un div con borde solid y ancho delimitado con el texto “Curso JavaScript aprenderaprogramar.com”. Debajo del div deben mostrarse dos botones o pulsadores. Un botón debe indicar “Añadir al final” y otro “Anidar”. Cuando se pulse el botón “Añadir al final”, debe añadirse un div al final de la página con el texto “Nodo creado 1” (o Nodo creado 2, 3, 4… según corresponda). Cuando se pulse el botón “Anidar” debe añadirse un div dentro del div inicial con el texto “Nodo creado 5” (o Nodo creado 6, 7, 8… según corresponda). La numeración será única, es decir, podremos saber en qué orden han sido creados los div estén dentro o fuera del div inicial.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio CU01140E</title>
    <style>
        body {
            font-family: sans-serif;
            text-align:center;
        }
       
        div {
            border: solid black 1px;
            background-color: burlywood;
            width: 200px;
            height: 50px;
            margin: 10px;
            padding: 10px; 
        }
    </style>
    <script>
        var contador = 0;
        var contadorDivAnidado = 0;

        // div al final de la página con el número correspondiente
        function añadirAlFinal(){
            var divHijo = document.createElement('div');
            document.body.appendChild(divHijo);
            divHijo.textContent = 'Nodo N° ' + contador;
            contador = contador + 1;
        }

        // div dentro del div inicial con el número correspondiente
        function anidar(){
            var divPadre = document.getElementById('div'+contadorDivAnidado); // busco el div principal
            var nuevoDiv = document.createElement('div'); // creo la variable div
            nuevoDiv.id = 'div'+(contadorDivAnidado+1); // le asigno un id con el número siguiente
            nuevoDiv.textContent = 'Nodo N°' + contador;
            divPadre.appendChild(nuevoDiv);
            contador = contador + 1;
            contadorDivAnidado = contadorDivAnidado + 1;
        }

    </script>
</head>
<body>
    <div id="div0">
        Curso JavaScript aprenderaprogramar.com
    </div>

    <input type="button" value="Añadir al final" onclick="añadirAlFinal()">
    <input type="button" value="Anidar" onclick="anidar()">
</body>
</html>
« Última modificación: 29 de Septiembre 2020, 19:34 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, este ejercicio está bien resuelto pero haría dos observaciones:

- En general conviene evitar usar la eñe para dar nombre a variables o funciones. Por ello solemos recomendar formas como annadirAlFinal en lugar de añadirAlFinal

- La visualización que obtengo al ejecutar hace que se vean los nodos superpuestos y no se ve bien

En este otro enlace dejo una solución donde los nodos se visualizan correctamente sin superponerse: https://aprenderaprogramar.com/foros/index.php?topic=3926.msg16671#msg16671

Esta solución también aplica una lógica diferente que puede ser interesante revisar.

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".