Metoda insertAdjacentHTML

Metoda insertAdjacentHTML omogoča vstavitev niza HTML kode na katero koli mesto strani. Koda se vstavi glede na referenčni element. Možno je vstaviti pred referenčni element (način vstavljanja 'beforeBegin'), za njim (način vstavljanja 'afterEnd'), pa tudi na začetek (način vstavljanja 'afterBegin') ali na konec (način vstavljanja 'beforeEnd') referenčnega elementa.

Sintaksa

referenčni element.insertAdjacentHTML(način vstavljanja, koda za vstavljanje);

Primer . Način beforeBegin

Naj bo referenčni element - element #target. Vstavimo nov odstavek pred njim:

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

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

Rezultat izvajanja kode:

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

Primer . Način afterEnd

Zdaj pa vstavimo nov odstavek za referenčnim elementom:

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

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

Rezultat izvajanja kode:

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

Primer . Način afterBegin

Vstavimo nov odstavek na začetek referenčnega elementa:

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

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

Rezultat izvajanja kode:

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

Primer . Način beforeEnd

Vstavimo nov odstavek na konec referenčnega elementa:

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

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

Rezultat izvajanja kode:

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

Glejte tudi

metoda insertAdjacentText,
ki vstavi besedilo na določeno mesto
metoda insertAdjacentElement,
ki vstavi element na določeno mesto
metoda prepend,
ki vstavi elemente na začetek
metoda append,
ki vstavi elemente na konec
metoda appendChild,
ki vstavi elemente na konec starša
metoda insertBefore,
ki vstavi elemente pred element