Metodo insertAdjacentHTML

Il metodo insertAdjacentHTML consente di inserire una stringa di codice HTML in qualsiasi punto della pagina. Il codice viene inserito relativamente a un elemento di riferimento. È possibile effettuare l'inserimento prima dell'elemento di riferimento (modalità di inserimento 'beforeBegin'), dopo di esso (modalità di inserimento 'afterEnd'), così come all'inizio (modalità di inserimento 'afterBegin') o alla fine (modalità di inserimento 'beforeEnd') dell'elemento di riferimento.

Sintassi

elemento_di_riferimento.insertAdjacentHTML(modalità_di_inserimento, codice_da_inserire);

Esempio . Modalità beforeBegin

Supponiamo che l'elemento di riferimento sia l'elemento #target. Inseriamo un nuovo paragrafo prima di esso:

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

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

Risultato dell'esecuzione del codice:

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

Esempio . Modalità afterEnd

Ora inseriamo un nuovo paragrafo dopo l'elemento di riferimento:

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

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

Risultato dell'esecuzione del codice:

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

Esempio . Modalità afterBegin

Inseriamo un nuovo paragrafo all'inizio dell'elemento di riferimento:

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

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

Risultato dell'esecuzione del codice:

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

Esempio . Modalità beforeEnd

Inseriamo un nuovo paragrafo alla fine dell'elemento di riferimento:

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

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

Risultato dell'esecuzione del codice:

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

Vedi anche

metodo insertAdjacentText,
che inserisce testo nel punto specificato
metodo insertAdjacentElement,
che inserisce un elemento nel punto specificato
metodo prepend,
che inserisce elementi all'inizio
metodo append,
che inserisce elementi alla fine
metodo appendChild,
che inserisce elementi alla fine del genitore
metodo insertBefore,
che inserisce elementi prima di un elemento