Metoda insertAdjacentHTML

Metoda insertAdjacentHTML permite inserarea unui șir de cod HTML în orice loc pe pagină. Codul este inserat în raport cu un element de referință. Puteți face inserarea înainte de elementul de referință (mod de inserare 'beforeBegin'), după acesta (mod de inserare 'afterEnd'), de asemenea la început (mod de inserare 'afterBegin') sau la sfârșit (mod de inserare 'beforeEnd') elementului de referință.

Sintaxă

elementul de referință.insertAdjacentHTML(mod de inserare, cod de inserat);

Exemplu . Modul beforeBegin

Să presupunem că elementul de referință este elementul #target. Să inserăm înaintea lui un nou paragraf:

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

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

Rezultatul executării codului:

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

Exemplu . Modul afterEnd

Acum să inserăm un nou paragraf după elementul de referință:

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

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

Rezultatul executării codului:

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

Exemplu . Modul afterBegin

Să inserăm un nou paragraf la începutul elementului de referință:

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

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

Rezultatul executării codului:

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

Exemplu . Modul beforeEnd

Să inserăm un nou paragraf la sfârșitul elementului de referință:

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

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

Rezultatul executării codului:

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

Vedeți și

metoda insertAdjacentText,
care inserează text într-o locație specificată
metoda insertAdjacentElement,
care inserează un element într-o locație specificată
metoda prepend,
care inserează elemente la început
metoda append,
care inserează elemente la sfârșit
metoda appendChild,
care inserează elemente la sfârșitul părintelui
metoda insertBefore,
care inserează elemente înaintea unui element