Metod insertAdjacentHTML

Metod insertAdjacentHTML omogućava umetanje stringa HTML koda na bilo koje mesto na stranici. Kod se umeće u odnosu na referentni element. Možete izvršiti umetanje ispred referentnog elementa (način umetanja 'beforeBegin'), nakon njega (način umetanja 'afterEnd'), kao i na početak (način umetanja 'afterBegin') ili na kraj (način umetanja 'beforeEnd') referentnog elementa.

Sintaksa

referentni element.insertAdjacentHTML(način umetanja, kod za umetanje);

Primer . Način beforeBegin

Neka je referentni element element #target. Umetnimo ispred njega novi pasus:

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

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

Rezultat izvršavanja koda:

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

Primer . Način afterEnd

A sada umetnimo novi pasus nakon referentnog elementa:

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

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

Rezultat izvršavanja koda:

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

Primer . Način afterBegin

Umetnimo novi pasus na početak referentnog elementa:

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

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

Rezultat izvršavanja koda:

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

Primer . Način beforeEnd

Umetnimo novi pasus na kraj referentnog elementa:

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

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

Rezultat izvršavanja koda:

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

Videti takođe

metod insertAdjacentText,
koji umetne tekst na dato mesto
metod insertAdjacentElement,
koji umetne element na dato mesto
metod prepend,
koji umetne elemente na početak
metod append,
koji umetne elemente na kraj
metod appendChild,
koji umetne elemente na kraj roditelja
metod insertBefore,
koji umetne elemente ispred elementa