Método insertAdjacentHTML

O método insertAdjacentHTML permite inserir uma string de código HTML em qualquer lugar da página. O código é inserido em relação a um elemento de referência. É possível fazer a inserção antes do elemento de referência (método de inserção 'beforeBegin'), depois dele (método de inserção 'afterEnd'), assim como no início (método de inserção 'afterBegin') ou no final (método de inserção 'beforeEnd') do elemento de referência.

Sintaxe

javascriptelemento de referência.insertAdjacentHTML(método de inserção, código para inserir);

Exemplo . Método beforeBegin

Suponha que o elemento de referência seja o elemento #target. Vamos inserir um novo parágrafo antes dele:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Resultado da execução do código:

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

Exemplo . Método afterEnd

Agora vamos inserir um novo parágrafo depois do elemento de referência:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

Resultado da execução do código:

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

Exemplo . Método afterBegin

Vamos inserir um novo parágrafo no início do elemento de referência:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Resultado da execução do código:

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

Exemplo . Método beforeEnd

Vamos inserir um novo parágrafo no final do elemento de referência:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Resultado da execução do código:

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

Veja também