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

elementoDeReferencia.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:

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

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

Resultado de ejecutar el código:

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

Resultado de ejecutar el código:

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

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

Resultado de ejecutar el código:

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

Resultado de ejecutar el código:

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

Véase también

método insertAdjacentText,
que inserta texto en un lugar determinado
método insertAdjacentElement,
que inserta un elemento en un lugar determinado
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 de un elemento