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
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 delelementoObjetivo
.'afterbegin'
: Dentro delelementoObjetivo
, antes de su primer hijo.'beforeend'
: Dentro delelementoObjetivo
, después de su último hijo.'afterend'
: Después delelementoObjetivo
.
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 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 Standard # dom-element-insertadjacentelement |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore()
(similar tobeforebegin
, with different arguments)Node.appendChild()
(mismo efecto quebeforeend
)