El método insertAdjacentElement() inserta un elemento nodo dado en una posición dada con respecto al elemento sobre el que se invoca.

Syntax

elementoObjetivo.insertAdjacentElement(posicion, elemento);

Parameters

posicion
Un DOMString representando la posición relativa al elementoObjetivo; debe ser una de las siguientes cadenas:
  • 'beforebegin': Antes del elemento.
  • 'afterbegin': Dentro del elemento, antes de su primer hijo.
  • 'beforeend': Dentro del elemento, después de su último hijo.
  • 'afterend': Después del elemento.
elemento
El elemento HTML a ser insertado.

Valor de Retorno (@return)

El elemento insertado  o null, si la inserción falla.

Excepciones (Exceptions)

Exception Explicación
SyntaxError La posicion especificada no tiene un valor reconocido.
TypeError El elemento especificado no es un elemento válido.

Visualización de los nombres de posición

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Nota: Las posiciones beforebegin y afterend sólo funcionan si el nodo está en un árbol y tiene un padre.

Ejemplo

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('beforebegin',tempDiv);
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement('afterend',tempDiv);
  setListener(tempDiv);
});

Mira nuestro insertAdjacentElement.html demo en Github (mira el código fuente también.) Aquí tenemos una  secuencia de elementos <div> dentro de un contenedor. Cuando uno es clickeado, se torna en seleccionado y tu puedes presionar los botones Insert beforeInsert after para insertar nuevos divs antes o despues del elemento seleccionado usando insertAdjacentElement().

Especificaciones

Specification Status Comment
DOM
La definición de 'insertAdjacentElement()' en esta especificación.
Living Standard  

Compatibilidad de Navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 48.0 (48.0) 8 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 48.0 (48.0) ? ? ?

Mira también

Etiquetas y colaboradores del documento

Colaboradores en esta página: alexlndn, AgustinPrieto
Última actualización por: alexlndn,