Método insertAdjacentElement

O método insertAdjacentElement permite inserir um elemento em qualquer lugar da página. É mais frequentemente usado após criar um elemento com createElement. O código é inserido em relação a um elemento de referência. É possível inserir antes do elemento de referência (método de inserção beforeBegin), depois dele (método de inserção afterEnd), bem 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.insertAdjacentElement(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 p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', 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 após o elemento de referência:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', 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 p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', 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 p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

Resultado da execução do código:

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

Veja também