EL métodoinsertAdjacentHTML() de la interfazElement 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 coninnerHTML.

Sintaxis

element.insertAdjacentHTML(posición, texto);

Parámetros

posición

UnDOMString que representa la posición relativa alelemento, y deberá ser una de las siguientes cadenas:

• 'beforebegin': Antes que el propioelemento.
• 'afterbegin': Justo dentro delelemento, antes de su primer elemento hijo.
• 'beforeend': Justo dentro delelemento, después de su último elemento hijo.
• 'afterend': Después del propioelemento.

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 -->

Ejemplo

// <div>one</div>var d1 = document.getElementById("one");d1.insertAdjacentHTML("afterend", '<div>two</div>');// En este punto, la nueva estructura es:// <div>one</div><div>two</div>

Notas

Consideraciones de seguridad

Cuando se inserte texto HTML en una página usandoinsertAdjacentHTML() 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 usarinsertAdjacentHTML() cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedadNode.textContent o el métodoElement.insertAdjacentText(). Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.

Especificaciones

Compatibilidad con navegadores

Véase también

• Element.insertAdjacentElement()
• Element.insertAdjacentText()
• XMLSerializer: Contruir una representación del DOM de un texto XML
• hacks.mozilla.org guest post por Henri Sivonen incluye puntos de referencia mostrando que insertAdjacentHTML puede ser mucho más rápido en algunos casos.