Metoda insertAdjacentHTML

Metoda insertAdjacentHTML umożliwia wstawienie ciągu kodu HTML w dowolne miejsce strony. Kod jest wstawiany względem elementu odniesienia. Można dokonać wstawienia przed elementem odniesienia (sposób wstawienia 'beforeBegin'), po nim (sposób wstawienia 'afterEnd'), a także na początku (sposób wstawienia 'afterBegin') lub na końcu (sposób wstawienia 'beforeEnd') elementu odniesienia.

Składnia

element odniesienia.insertAdjacentHTML(sposób wstawienia, kod do wstawienia);

Przykład . Sposób beforeBegin

Niech elementem odniesienia będzie element #target. Wstawmy przed nim nowy akapit:

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

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

Wynik wykonania kodu:

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

Przykład . Sposób afterEnd

A teraz wstawmy nowy akapit po elemencie odniesienia:

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

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

Wynik wykonania kodu:

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

Przykład . Sposób afterBegin

Wstawmy nowy akapit na początku elementu odniesienia:

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

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

Wynik wykonania kodu:

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

Przykład . Sposób beforeEnd

Wstawmy nowy akapit na końcu elementu odniesienia:

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

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

Wynik wykonania kodu:

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

Zobacz też

metoda insertAdjacentText,
która wstawia tekst w określone miejsce
metoda insertAdjacentElement,
która wstawia element w określone miejsce
metoda prepend,
która wstawia elementy na początku
metoda append,
która wstawia elementy na końcu
metoda appendChild,
która wstawia elementy na końcu rodzica
metoda insertBefore,
która wstawia elementy przed elementem