Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
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 abril de 2018.
El métodoinsertAdjacentElement() 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ónUn
DOMStringrepresentando 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.
elementoEl elemento HTML a ser insertado.
Valor devuelto
El elemento insertado onull, si la inserción falla.
Excepciones
| Excepción | Explicación |
|---|---|
SyntaxError | Laposición especificada no tiene un valor reconocido. |
TypeError | Elelemento especificado no es un elemento válido. |
Visualización de los nombres de posición
<!-- beforebegin --><p> <!-- afterbegin --> foo <!-- beforeend --></p><!-- afterend -->
Nota:Las posicionesbeforebegin yafterend 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 nuestroinsertAdjacentElement.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 botonesInsert before eInsert after para insertar nuevos divs antes o despues del elemento seleccionado usandoinsertAdjacentElement().
Especificaciones
| Specification |
|---|
| DOM # dom-element-insertadjacentelement |
Compatibilidad con navegadores
Véase también
Element.insertAdjacentHTML()Element.insertAdjacentText()Node.insertBefore()(similar tobeforebegin, with different arguments)Node.appendChild()(mismo efecto quebeforeend)