Insertar Elementos Antes o Después de un Nodo con JavaScript

En algunas situaciones necesitamos insertar un nuevo elemento no dentro de un contenedor, sino antes o después de un nodo específico. Esto es muy útil cuando queremos mantener una estructura clara y precisa del DOM, especialmente en componentes reutilizables, listas ordenadas o formularios dinámicos.

JavaScript nos ofrece el método insertBefore(), que nos permite insertar un elemento antes de otro dentro del mismo contenedor. Sin embargo, no existe un método nativo llamado insertAfter(), por lo que necesitamos construir una pequeña función auxiliar que logre ese comportamiento.

En este artículo aprenderemos cómo utilizar insertBefore() correctamente y cómo crear nuestra propia función insertAfter() para ampliar nuestras herramientas de manipulación del DOM.

Insertar un Elemento Antes de Otro con insertBefore()

Supongamos que tenemos una lista de elementos y queremos insertar uno nuevo antes de un ítem específico. Este método requiere conocer tanto el elemento que será insertado como el nodo de referencia y ambos deben compartir el mismo padre.

Ejemplo con insertBefore

Primero vamos a crear una lista simple en HTML donde podamos hacer la inserción:

<ul id="lista">
  <li id="item2">Elemento 2</li>
  <li>Elemento 3</li>
</ul>

<button onclick="insertarAntes()">Insertar antes</button>

Ahora vamos a escribir el código JavaScript que inserta un nuevo elemento antes del elemento con ID item2:

function insertarAntes() {
  const lista = document.getElementById("lista");
  const item2 = document.getElementById("item2");

  const nuevoItem = document.createElement("li");
  nuevoItem.textContent = "Elemento 1";

  lista.insertBefore(nuevoItem, item2);
}

Después de ejecutar esta función, la lista se verá así:

<ul id="lista">
  <li>Elemento 1</li>
  <li id="item2">Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Este enfoque es muy eficiente y está soportado por todos los navegadores, incluyendo versiones antiguas como Internet Explorer.

Insertar un Elemento Después de Otro con una Función insertAfter()

JavaScript no cuenta con un método nativo insertAfter(), pero podemos lograr el mismo efecto utilizando insertBefore() y accediendo al siguiente nodo del nodo de referencia.

En este caso vamos a crear una función auxiliar reutilizable que reciba tres parámetros: el nuevo nodo, el nodo de referencia y el padre.

function insertAfter(nuevoElemento, referencia, padre) {
  if (referencia.nextSibling) {
    padre.insertBefore(nuevoElemento, referencia.nextSibling);
  } else {
    padre.appendChild(nuevoElemento);
  }
}

Esta función evalúa si el nodo de referencia tiene un hermano siguiente. Si lo tiene, usa insertBefore() para insertar el nuevo nodo justo antes de ese hermano. Si no lo tiene (es el último hijo) simplemente lo agrega al final.

Vamos a usar esta función en un ejemplo práctico. Partimos de este HTML:

<ul id="lista">
  <li id="item2">Elemento 2</li>
  <li>Elemento 3</li>
</ul>

<button onclick="insertarDespues()">Insertar después</button>

Ahora usamos insertAfter() para insertar un nuevo elemento después del item2:

function insertarDespues() {
  const lista = document.getElementById("lista");
  const item2 = document.getElementById("item2");

  const nuevoItem = document.createElement("li");
  nuevoItem.textContent = "Elemento 2.5";

  insertAfter(nuevoItem, item2, lista);
}

Al ejecutar esta función, el resultado en el DOM será:

<ul id="lista">
  <li id="item2">Elemento 2</li>
  <li>Elemento 2.5</li>
  <li>Elemento 3</li>
</ul>

Esta función es especialmente útil cuando queremos extender funcionalidades del DOM sin depender de métodos más modernos como after() y sigue siendo compatible con navegadores antiguos.

Conclusión

Insertar elementos antes o después de un nodo específico es una necesidad común en aplicaciones dinámicas. En este artículo aprendimos a:

• Usar insertBefore() para colocar un nodo antes de otro dentro del mismo contenedor.
• Crear una función auxiliar insertAfter() que nos permite insertar un nodo después del nodo de referencia.

Con estas herramientas completamos el conjunto fundamental de métodos para modificar la estructura del DOM de forma precisa, manteniendo la compatibilidad con todos los navegadores.

En el próximo bloque nos adentraremos en la manipulación de atributos, aprendiendo cómo leer, modificar y eliminar atributos HTML con JavaScript.