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

cristiannd · « **en:** 27 de Abril 2020, 22:59 »

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>

Ogramar · « **Respuesta #1 en:** 29 de Septiembre 2020, 19:34 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: