Element.insertAdjacentElement()

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

Sintaxis

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

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

Especificaci贸n Estado Comentario
DOM
La definici贸n de 'insertAdjacentElement()' en esta especificaci贸n.
Living Standard

Compatibilidad con Navegadores

BCD tables only load in the browser

Mira tambi茅n