We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

insertAdjacentHTML() 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 innerHTML.

Sintaxis

elemento.insertAdjacentHTML(posición, texto);
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
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>');

// At this point, the new structure is:
// <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 node.textContent o node.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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)

Soporte básico

1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? 8.0 (8.0) ? ? ?

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: AlePerez92, mikekrn
Última actualización por: AlePerez92,