Element.insertAdjacentHTML()

EL método insertAdjacentHTML() de la interfaz Element analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada. Este método no re-analiza el elemento sobre el cual se está invocando y por lo tanto no corrompe los elementos ya existentes dentro de dicho elemento. Esto evita el paso adicional de la serialización, haciéndolo mucho más rápido que la manipulación directa con innerHTML.

Sintaxis

element.insertAdjacentHTML(posición, texto);

Parámetros

posición
Un DOMString que representa la posición relativa al elemento, y deberá ser una de las siguientes cadenas:
  • 'beforebegin': Antes que el propio elemento.
  • 'afterbegin': Justo dentro del elemento, antes de su primer elemento hijo.
  • 'beforeend': Justo dentro del elemento, después de su último elemento hijo.
  • 'afterend': Después del propio elemento.
texto
Es la cadena a ser analizada como HTML o XML e insertada en el árbol.

Visualizacion de las posiciones

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
Nota: Las posiciones beforebegin y afterend funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.

Ejemplo

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// En este punto, la nueva estructura es:
// <div id="one">one</div><div id="two">two</div>

Notas

Consideraciones de seguridad

Cuando se inserte texto HTML en una página usando insertAdjacentHTML() debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.

Se recomienda no usar insertAdjacentHTML() cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedad Node.textContent o el método Element.insertAdjacentText(). Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.

Especificación

Especificación Estado Comentario
DOM Parsing and Serialization
La definición de 'Element.insertAdjacentHTML()' en esta especificación.
Working Draft

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
insertAdjacentHTMLChrome Soporte completo 1Edge Soporte completo 18
Soporte completo 18
Soporte completo 12
Notas
Notas This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Soporte completo 8IE Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Notas This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Soporte completo 7Safari Soporte completo 10WebView Android Soporte completo 2.3Chrome Android Soporte completo 18Firefox Android Soporte completo 8Opera Android Soporte completo SiSafari iOS Soporte completo 4Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Ver notas de implementación.
Ver notas de implementación.

Ver también