Método insertAdjacentHTML

El método insertAdjacentHTML permite insertar una cadena de código HTML en cualquier lugar de la página. El código se inserta en relación con el 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'), también al principio (modo de inserción 'afterBegin') o al final (modo de inserción 'beforeEnd') del elemento de referencia.

Sintaxis

javascriptelementoDeReferencia.insertAdjacentHTML(modoDeInserción, códigoAInsertar);

Ejemplo . Modo beforeBegin

Supongamos que el elemento de referencia es el elemento #target. Insertemos un nuevo párrafo antes de él:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Resultado de ejecutar el código:

html<p>!</p>
<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.insertAdjacentHTML('afterEnd', '<p>!</p>');

Resultado de ejecutar el código:

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

Ejemplo . Modo 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.insertAdjacentHTML('afterBegin', '<p>!</p>');

Resultado de ejecutar el código:

html<div id="target">
  <p>!</p>
  <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.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Resultado de ejecutar el código:

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

Véase también