Insertar un elemento antes de otro elemento DOM con JavaScript

En JavaScript vainilla, puede usar el insertBefore() método para insertar un elemento antes de otro elemento HTML en el DOM. Este método agrega un elemento, justo antes de un elemento existente en el documento.

Digamos que tenemos el siguiente <p> existente elemento:

<p id="intro">Hey, I am John!</p>

Nuestro objetivo es agregar otro <p> etiqueta justo antes del elemento anterior en el DOM. Aquí hay un ejemplo que crea una nueva etiqueta de párrafo y luego la inserta antes el anterior <p> etiqueta:

// create new element
const elem = document.createElement('p');

// add text
elem.innerText = 'Personal Details';

// grab target element reference
const target = document.querySelector('#intro');

// insert the element before target element
target.parentNode.insertBefore(elem, target);

El insertBefore() El método es compatible con todos los navegadores modernos y antiguos, incluido Internet Explorer 6 y superior.

Si desea insertar una cadena HTML antes de un elemento en el DOM, debe usar insertAdjacentHTML() método en su lugar. Este método analiza la cadena especificada como HTML e inserta los elementos resultantes en el árbol DOM en una posición específica. Aquí hay un ejemplo:

// insert HTML string before target element
target.insertAdjacentHTML('beforebegin', '<p>Personal Details</p>');

Eche un vistazo a esta guía de MDN para obtener más información sobre el insertAdjacentHTML() método.

ES6 before() Método

El insertBefore() El método funciona muy bien para agregar un nuevo elemento antes de otro elemento en el DOM. Sin embargo, debe llamarlo en el parentNode del elemento de destino.

Afortunadamente, ES6 introdujo un nuevo método llamado before() para insertar un elemento antes de otro elemento DOM. Llamas al before() en el nodo de destino directamente y pase el nuevo elemento como un parámetro como se muestra a continuación:

// insert the element before target element
target.before(elem);

Y eso es. El before() es solo compatible con las últimas versiones de Chrome, Safari, Firefox y Opera, y no funciona en Internet Explorer. Sin embargo, puede usar un polyfill para extender el soporte hasta IE 9 y superior.

Leer a continuación: Cómo insertar un elemento al DOM en JavaScript