Metoda insertAdjacentHTML

Metoda insertAdjacentHTML lejon futjen e një vargu kodi HTML në çdo vend të faqes. Kodi futet në raport me elementin referues. Mund të bëhet futja përpara elementit referues (mënyra e futjes 'beforeBegin'), pas tij (mënyra e futjes 'afterEnd'), si dhe në fillim (mënyra e futjes 'afterBegin') ose në fund (mënyra e futjes 'beforeEnd') të elementit referues.

Sintaksa

elementi referues.insertAdjacentHTML(mënyra e futjes, kodi për t'u futur);

Shembull . Mënyra beforeBegin

Le të jetë elementi referues elementi #target. Le të fusim përpara tij një paragraf të ri:

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra afterEnd

Tani le të fusim një paragraf të ri pas elementit referues:

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra afterBegin

Le të fusim një paragraf të ri në fillim të elementit referues:

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra beforeEnd

Le të fusim një paragraf të ri në fund të elementit referues:

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

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

Rezultati i ekzekutimit të kodit:

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

Shihni gjithashtu

metoda insertAdjacentText,
e cila fut tekst në vendin e caktuar
metoda insertAdjacentElement,
e cila fut një element në vendin e caktuar
metoda prepend,
e cila fut elemente në fillim
metoda append,
e cila fut elemente në fund
metoda appendChild,
e cila fut elemente në fund të prindit
metoda insertBefore,
e cila fut elemente përpara elementit