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.
Working Draft  

Compatibilidade de Navegadores

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

Etiquetas do documento e colaboradores

 Colaboradores desta página: rafaelcavalcante, raphaelchaib, belsanpesou
 Última atualização por: rafaelcavalcante,