MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Traducción en curso

Resumen

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, haciendolo mucho más rápido que la manipulación directa innerHTML.

Sintaxis

elemento.insertAdjacentHTML(posicion, texto);

posicion es la posición relativa al elemento, y deberá ser una de las siguientes cadenas:

'beforebegin'
Antes que el elemento mismo.
'afterbegin'
Justo al inicio dentro del elemento, antes del primer elemento hijo.
'beforeend'
Dentro del elemento, justo despues del último elemento hijo.
'afterend'
Despues del elemento mismo.

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, utilize node.textContent. Este método no interpreta el texto pasado como HTML, si no que lo inserta como "texto plano".

Especificación

Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.
Working Draft  

Compatibilidad con Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 8.0 (8.0) ? ? ?

Mirar tambien

Etiquetas y colaboradores del documento

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