Cómo crear elementos HTML con JavaScript dinámicamente

Además de seleccionar los nodos directamente cómo expliqué anteriormente, otra tarea habitual es eliminar y crear elementos HTML con JavaScript . Esto implicaría modificar el árbol DOM ya que crearíamos y eliminaríamos sus nodos.

Crear elementos HTML en JavaScript

Un elemento HTML puede ser desde un párrafo hasta un input y estos tienen su respectivo nodo en el DOM. En el caso de un párrafo, puede consistir en 2 nodos: el <p> es un nodo element y su contenido textual es un nodo tipo Text. Para el siguiente ejemplo realizaremos

Crear un nodo tipo Element que representa el elemento
Crear un nodo tipo Text que será el contenido del elemento
Hacer que el nodo Text sea hijo del nodo Element
Finalmente añadir el nodo Element a la página

// Crear nodo de tipo Element
var parrafo = document.createElement("p");
	
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
	
// Añadir el nodo Text como hijo del nodo tipo Element
parrafo.appendChild(contenido);
	
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);

// Crear nodo de tipo Element

var parrafo = document.createElement("p");

// Crear nodo de tipo Text

var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo tipo Element

parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina

document.body.appendChild(parrafo);

Si quisiéramos añadir el elemento HTML a un elemento en concreto, podemos emplear los métodos del anterior post. Por ejemplo, en vez de agregar el nodo al body, podemos agregarlo a un div con el id «container»

var contenedor = document.getElementById("container");
contenedor.appendChild(parrafo);

1 2	var contenedor = document.getElementById("container"); contenedor.appendChild(parrafo);

Para poder crear elementos HTML con JavaScript tenemos que usar un mínimo de 2 funciones:

createElement(etiqueta): crea un nodo de tipo Element que representa al elemento HTML cuya etiqueta se pasa como parámetro.
createTextNode(contenido): crea un nodo de tipo Text que almacena el contenido textual de los elementos HTML.
nodoPadre.appendChild(nodoHijo): añade un nodo como hijo de otro nodo. Se debe utilizar al menos dos veces con los nodos habituales: en primer lugar se añade el nodo Text como hijo del nodo Element y a continuación se añade el nodo Element como hijo de algún nodo de la página.

Eliminar elementos HTML con JavaScript

Ya que ya sabemos cómo crear elementos no está demás saber cómo poder eliminarlos. Para eliminar un elemento HTML con JavaScript tenemos la función removeChild();

var eliminado = document.getElementById("paraEliminar");
eliminado.parentNode.removeChild(eliminado);

1 2	var eliminado = document.getElementById("paraEliminar"); eliminado.parentNode.removeChild(eliminado);

Esta función tiene como parámetro el nodo que se va eliminar. Además, esta función debe ser invocada desde el elemento padre de ese nodo que se quiere eliminar. Por ello, en el ejemplo usamos parentNode en el ejemplo ya que es la forma más segura y rápida de acceder al nodo padre de un elemento. También hay que tener en cuenta que cuando se elimina un nodo, se eliminan automáticamente todos los nodos hijos que tenga.

Y hasta aquí cómo crear elementos HTML con JavaScript, espero que os haya gustado. A seguir picando 🙂