Insertar un elemento después de otro elemento DOM con JavaScript

En artículos anteriores, vimos cómo crear un elemento e insertarlo antes de otro elemento en el DOM mediante el uso de JavaScript estándar.

En este breve artículo, aprenderá sobre diferentes formas de insertar un elemento después otro en el DOM con JavaScript.

El insertBefore() El método, que aprendimos anteriormente para agregar un elemento antes, también se puede usar para insertar un elemento después de un nodo HTML. Para este propósito, necesitamos usar el elemento nextSibling propiedad que devuelve una referencia a un nodo inmediato en el mismo nivel de árbol.

Aquí hay un ejemplo:

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

// add text
elem.innerText = 'I am a software engineer.';

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

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

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

Si desea insertar una cadena HTML después de cierto elemento en el DOM, use el insertAdjacentHTML() en cambio, como a continuación:

// insert HTML string after target element
target.insertAdjacentHTML('afterend', '<p>I am a software engineer.</p>');

El insertAdjacentHTML() El método analiza automáticamente la cadena dada como HTML e inserta los elementos resultantes en el árbol DOM en la posición dada. Echa un vistazo a esta guía para obtener más información al respecto.

ES6 after() Método

ES6 introdujo un nuevo método llamado after() para insertar un elemento justo después de un nodo existente en el DOM. Simplemente llame a este método en el elemento después del cual desea insertar un elemento y pase el nuevo elemento como argumento:

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

Al igual que el before() método, after() solo funciona en navegadores modernos específicamente en Chrome, Safari, Firefox y Opera. Por el momento, Internet Explorer no admite este método. Sin embargo, puede usar un polyfill para llevar el soporte hasta IE 9 y superior.

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