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
elemento 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:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');
Resultado de ejecutar el código:
text
<div id="target">
<p>elem</p>
</div>
Ejemplo . Modo afterEnd
Ahora insertemos un nuevo párrafo después del elemento de referencia:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');
Resultado de ejecutar el código:
<div id="target">
<p>elem</p>
</div>
text
Ejemplo . afterBegin
Insertemos un nuevo párrafo al principio del elemento de referencia:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');
Resultado de ejecutar el código:
<div id="target">
text
<p>elem</p>
</div>
Ejemplo . Modo beforeEnd
Insertemos un nuevo párrafo al final del elemento de referencia:
<div id="target">
<p>elem</p>
</div>
let target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');
Resultado de ejecutar el código:
<div id="target">
<p>elem</p>
text
</div>
Véase también
-
método
insertAdjacentElement,
que inserta un elemento en el lugar especificado -
método
insertAdjacentHTML,
que inserta código en el lugar especificado -
método
prepend,
que inserta elementos al principio -
método
append,
que inserta elementos al final -
método
appendChild,
que inserta elementos al final del padre -
método
insertBefore,
que inserta elementos antes del elemento
