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!
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
Node.insertBefore()
Node.appendChild()
(mesmo efeito debeforeend
)- hacks.mozilla.org guest post por Henri Sivonen incluem benchmarks que demonstram que insertAdjacentHTML pode ser bem rápido em alguns casos.