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

elemento 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:

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

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

Resultado da execução do código:

<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:

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

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

Resultado da execução do código:

<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:

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

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

Resultado da execução do código:

<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:

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

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

Resultado da execução do código:

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

Veja também

método insertAdjacentText,
que insere texto em um local especificado
método insertAdjacentElement,
que insere um elemento em um local especificado
método prepend,
que insere elementos no início
método append,
que insere elementos no final
método appendChild,
que insere elementos no final do elemento pai
método insertBefore,
que insere elementos antes de um elemento