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 <strong>. Sin embargo, mediante .childNodes que nos devuelve en
- Un nodo de texto, correspondiente a
Visita. - Un elemento
<strong>, con el contenidoManz.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.
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 newnodedespués del último nodo hijo. Equivale a.appendChild().► inserta newnodeantes de dichonodede 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);
En este caso, el nuevo elemento aparecería justo antes del segundo item.
