Método insertAdjacentText

El método insertAdjacentText permite insertar una cadena en cualquier lugar de la página. La cadena se inserta relative al elemento de referencia. Se puede realizar la inserción antes del elemento de referencia (modo de inserción 'beforeBegin'), después de él (modo de inserción 'afterEnd'), así como al principio (modo de inserción 'afterBegin') o al final (modo de inserción 'beforeEnd') del elemento de referencia.

Sintaxis

javascriptelemento de referencia.insertAdjacentText(modo de inserción, texto a insertar);

Ejemplo . Modo beforeBegin

Supongamos que el elemento de referencia es el elemento #target. Insertemos antes de él algún texto:

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

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

Resultado de ejecutar el código:

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

Ejemplo . Modo afterEnd

Ahora insertemos un nuevo párrafo después del elemento de referencia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');

Resultado de ejecutar el código:

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

Ejemplo . afterBegin

Insertemos un nuevo párrafo al principio del elemento de referencia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

Resultado de ejecutar el código:

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

Ejemplo . Modo beforeEnd

Insertemos un nuevo párrafo al final del elemento de referencia:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

Resultado de ejecutar el código:

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

Véase también