La API de Nodos HTML

En capítulos anteriores hemos visto formas de crear elementos con createElement e incluso modificar el contenido con innerHTML. Aunque son opciones, a veces necesitamos un mayor control, y utilizar .innerHTML no es suficiente.

¿Qué son los Nodos?

La API de Nodos de Javascript es la más antigua y la que trabaja a más bajo nivel (a nivel de detalle muy profundo). Se basa en trabajar con ítems llamados nodos, que son una unidad aún más básica que los elementos HTML.

Un nodo en el contexto del DOM, es una unidad básica del HTML, donde podría ser un elemento HTML o unidades que no lo son, como por ejemplo un nodo de texto (que no está dentro de una etiqueta).

Observa el siguiente ejemplo:

const container = document.createElement("div");
container.innerHTML = `Visita <strong>Manz.dev</strong> (o al menos su Twitch).`;

container.children;      // HTMLCollection [strong]

container.childNodes;    // NodeList(3) [text, strong, text]
container.childNodes[0].textContent   // 'Visita '

Mediante .children obtenemos una lista de elementos , y sólo obtenemos el <strong>. Sin embargo, mediante .childNodes que nos devuelve en en lugar de , nos devuelve 3 nodos:

Un nodo de texto, correspondiente a Visita .
Un elemento <strong>, con el contenido Manz.dev.
Un nodo de texto, correspondiente a (o al menos su Twitch)..

Como puedes ver, la API de nodos tiene un nivel de granularidad más detallada, lo que lo hace más potente y flexible, pero muchas veces también demasiado tediosa.

API de Nodos

La API de nodos de Javascript es la más tradicional y antigua, y por esta razón suele ser la que más nos encontramos. Sin embargo, es importante tener en cuenta que no es la única, y muchas veces, tampoco es la mejor elección.

Los métodos que incorpora son los siguientes:

Métodos	Descripción	Devuelve...
`.appendChild(node)`	Añade como hijo el nodo `node`.	El nodo insertado.
`.removeChild(node)`	Elimina el nodo hijo `node`.	El nodo eliminado.
`.replaceChild(new, old)`	Reemplaza el nodo hijo `old` por `new`.	El nodo reemplazado.
`.insertBefore(new, node)`	Inserta el nodo `new` antes de `node` y como hijo del nodo actual.	El nodo insertado.
`.insertBefore(new,` `)`	Inserta el nodo `new` después del último nodo hijo. Equivalente a `.appendChild()`.	El nodo insertado.

De ellos, probablemente el método más extendido y conocido es .appendChild(). Vamos a analizar cada uno de ellos y ver como podemos utilizarlos.

El método `.appendChild()`

Uno de los métodos más comunes para añadir un elemento HTML creado con Javascript es .appendChild(). Como su propio nombre indica, este método añade o inserta un nuevo elemento, como si fuera un hijo al final de todos los hijos del elemento sobre el que se realiza.

createElement

Es importante tener claro donde se inserta, porque aunque es bastante común, no siempre querremos insertar el elemento en esa posición particular.

Observa el siguiente fragmento de código:

const container = document.querySelector(".container");

const img = document.createElement("img");
img.src = "https://lenguajejs.com/assets/logo.svg";
img.alt = "Logo Javascript";

container.appendChild(img);

En este ejemplo, creamos un elemento <img> que aún no está conectado al DOM de la página. Existe sólo en la constante <img>. Posteriormente, añadimos los atributos src y alt y lo conectamos al DOM el elemento usando el método .appendChild().

Se insertará como último hijo del elemento <body>, ya que es su comportamiento predefinido.

El método `.removeChild()`

En algunos casos, nos puede interesar eliminar un nodo hijo de un elemento. Para esas situaciones, podemos utilizar el método .removeChild(node) donde node es el nodo hijo que queremos eliminar:

const container = document.querySelector(".container");
const secondItem = container.querySelector(".item:nth-child(2)");

container.removeChild(secondItem); // Desconecta el segundo .item

El método `.replaceChild()`

De la misma forma, el método replaceChild(new, old) nos permite cambiar un nodo hijo old por un nuevo nodo hijo new. En ambos casos, el método nos devuelve el nodo reemplazado:

const container = document.querySelector(".container");
const secondItem = container.querySelector(".item:nth-child(2)");

const newNode = document.createElement("div");
newNode.textContent = "DOS";

container.replaceChild(newNode, secondItem);

El método `.insertBefore()`

Por último, el método insertBefore(newnode, node) es un método más específico y menos utilizado en el que se puede especificar exactamente el lugar a insertar un nodo. El primer parámetro es el nodo a insertar, mientras que el segundo parámetro puede ser:

► inserta newnode después del último nodo hijo. Equivale a .appendChild().
► inserta newnode antes de dicho node de referencia.

const container = document.querySelector(".container");
const secondItem = container.querySelector(".item:nth-child(2)");

const newNode = document.createElement("div");
newNode.textContent = "Nuevo elemento";

container.insertBefore(newNode, secondItem);