Ejemplo: Creación dinámica | Aplicaciones Web

El objetivo de este ejercicio es “inyectar y remover código” del Dom mediante JS. Utilizaremos las funciones aprendidas en este apartado. Copia el código en un fichero con extensión html y analiza el comportamiento de las dos funciones creacionDinamica y eliminacionDinamica

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creación de nodos en el DOM</title>
    <style>
        #contenedor{height: 100px;border: 1px solid #0000FF;}
    </style>
</head>
<body>
    <h1>Objetivo:</h1>
    <p>Crear un párrafo dentro de un DIV de manera dinámica</p>
    <p>El párrafo consta del TAG "P" y el texto entre los TAGS</p>

    <div id="contenedor"></div>

    <button onclick="creacionDinamica();">Inyectar código</button>
    <button onclick="eliminacionDinamica();">Remover código</button>

    <script>
        function creacionDinamica(){
            //Creamos nodo de tipo Element
            var parrafo = document.createElement("p");
            parrafo.setAttribute("id", "miparrafo");

            //Crear nodo de tipo Text
            var texto = document.createTextNode("Esta es una creación dinámica de texto");

            //Añador el texto al párrafo
            parrafo.appendChild(texto);

            //Añadir el párrafo al DIV existente
            var divContenedor = document.getElementById("contenedor");
            divContenedor.appendChild(parrafo);
        }
        function eliminacionDinamica(){
            var divContenedor = document.getElementById("contenedor");
            var parrafo = document.getElementById("miparrafo");
            divContenedor.removeChild(parrafo);
        }
    </script>
</body>
</html>