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

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'texto');

Resultado da execução do código:

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

Exemplo . Modo 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.insertAdjacentText('afterEnd', 'texto');

Resultado da execução do código:

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

Exemplo . 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.insertAdjacentText('afterBegin', 'texto');

Resultado da execução do código:

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

Exemplo . Modo 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.insertAdjacentText('beforeEnd', 'texto');

Resultado da execução do código:

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

Veja também