Element.insertAdjacentHTML()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

js
// 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ções

Specification
HTML
# the-insertadjacenthtml()-method

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertAdjacentHTML

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Veja também