Element.insertAdjacentHTML()

Resumo

insertAdjacentHTML analisa o texto especificado como HTML ou XML e insere os nós que resultam na árvore DOM em uma posição especificada. Não reanalisa o elemento que está a ser utilizado e, portanto, não corrompe os elementos existentes dentro do elemento. Esta, e evitando a etapa extra de serialização, torna-o muito mais rápido do que a manipulação direta innerHTML.

Sintaxe

element.insertAdjacentHTML(posição, texto);

Posição é a posição em relação ao elemento, e deve ser um dos seguintes tipos:

'beforebegin'
Antes do elemento.
'afterbegin'
Dentro do elemento, antes de seu primeiro filho (childNode).
'beforeend'
Dentro do elemento, após seu último filho (childNode) .
'afterend'
Após o elemento.

texto é a string a ser analisada como HTML ou XML e inserido na árvore.

Visualização da posição de nomes

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Nota:  As posições beforeBegin e afterEnd funcionam apenas se o nó está em uma árvore DOM e tem um elemento pai.

Exemplo

// Estrutura inicial:
// <div id="one">one</div>

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

// Neste ponto, a nova estrutura é:
// <div id="one">one</div>
// <div id="two">two</div>

Especificação

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

Compatibilidade de Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte 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
Suporte básico ? 8.0 (8.0) ? ? ?

 

Questão no IE:

  • No IE8, as mudanças no dom são feitas somente depois do JS ter terminado de carregar, então se você precisa acessar os nós gerados,  terá que fazê-lo de uma forma assíncrona.

Veja também