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
elemento 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:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', 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 após o elemento de referência:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Resultado da execução do código:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Veja também
-
método
insertAdjacentHTML,
que insere tags em um local especificado -
método
insertAdjacentText,
que insere texto 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 pai -
método
insertBefore,
que insere elementos antes de um elemento
