Método insertAdjacentText
O método insertAdjacentText permite
inserir uma string em qualquer lugar da página. A string
é inserida em relação a um elemento de referência.
É possível inserir antes do elemento de referência
(modo de inserção 'beforeBegin'), depois
dele (modo de inserção 'afterEnd'), bem
como no início (modo de inserção 'afterBegin')
ou no final (modo de inserção 'beforeEnd')
do elemento de referência.
Sintaxe
elemento de referência.insertAdjacentText(modo de inserção, texto para inserir);
Exemplo . Modo beforeBegin
Suponha que o elemento de referência seja o elemento #target.
Vamos inserir algum texto antes dele:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'texto');
Resultado da execução do código:
texto
<div id="target">
<p>elem</p>
</div>
Exemplo . Modo 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.insertAdjacentText('afterEnd', 'texto');
Resultado da execução do código:
<div id="target">
<p>elem</p>
</div>
texto
Exemplo . 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.insertAdjacentText('afterBegin', 'texto');
Resultado da execução do código:
<div id="target">
texto
<p>elem</p>
</div>
Exemplo . Modo 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.insertAdjacentText('beforeEnd', 'texto');
Resultado da execução do código:
<div id="target">
<p>elem</p>
texto
</div>
Veja também
-
método
insertAdjacentElement,
que insere um elemento em um local especificado -
método
insertAdjacentHTML,
que insere código 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
