Conceptos de DHTML

Para crear nodos de tipo elemento disponemos del método createElement que contiene el objeto document:

let elemento=document.createElement("Aca indicamos el nombre del elemento HTML a crear")

Para ver el funcionamiento confeccionemos un programa que cree un párrafo en forma dinámica y lo añada a un div.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <div id="parrafos">
    </div>
    <input type="button" value="Agregar nodo tipo elemento" onClick="agregar()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function agregar() {
    let elemento = document.createElement('p')
    let texto = document.createTextNode('Hola Mundo')
    elemento.appendChild(texto)
    let obj = document.getElementById('parrafos')
    obj.appendChild(elemento)
}

En la función agregar se crea un nodo de tipo elemento (tipo párrafo):

    let elemento = document.createElement('p')

Pero recordemos que los nodos elemento no contienen el texto, sino que hay que crear un nodo de texto y añadirlo al nodo de tipo elemento:

    let texto = document.createTextNode('Hola Mundo')
    elemento.appendChild(texto)

Por último obtenemos una referencia al div y añadimos el párrafo que acabamos de crear:

    let obj = document.getElementById('parrafos')
    obj.appendChild(elemento)

13 - Crear y agregar un nodo de tipo elemento (createElement - appendChild)

Retornar