Element.insertAdjacentElement()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Sintaxis

js
elementoObjetivo.insertAdjacentElement(posición, elemento);

Parameters

posición

Un DOMString representando la posición relativa al elementoObjetivo; debe ser una de las siguientes cadenas:

  • 'beforebegin': Antes del elementoObjetivo.
  • 'afterbegin': Dentro del elementoObjetivo, antes de su primer hijo.
  • 'beforeend': Dentro del elementoObjetivo, después de su último hijo.
  • 'afterend': Después del elementoObjetivo.
elemento

El elemento HTML a ser insertado.

Valor devuelto

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

Excepciones

Excepción Explicación
SyntaxError La posición 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

js
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 elcó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 before e Insert after para insertar nuevos divs antes o despues del elemento seleccionado usando insertAdjacentElement().

Especificaciones

Specification
DOM
# dom-element-insertadjacentelement

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertAdjacentElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Véase también