insertAdjacentHTML metodu

insertAdjacentHTML metodu səhifənin istənilən yerinə HTML kod sətri əlavə etməyə imkan verir. Kod əsas elementə nisbətən əlavə olunur. Əsas elementdən əvvəl ('beforeBegin' əlavə üsulu), ondan sonra ('afterEnd' əlavə üsulu), həmçinin əsas elementin əvvəlinə ('afterBegin' əlavə üsulu) ya da sonuna ('beforeEnd' əlavə üsulu) əlavə etmək olar.

Sintaksis

əsas element.insertAdjacentHTML(əlavə üsulu, əlavə olunacaq kod);

Nümunə . beforeBegin üsulu

Tutaq ki, əsas element #target elementidir. Onun qarşısına yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə . afterEnd üsulu

İndi isə əsas elementdən sonra yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə . afterBegin üsulu

Əsas elementin əvvəlinə yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə . beforeEnd üsulu

Əsas elementin sonuna yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Həmçinin bax

insertAdjacentText metodu,
mətni təyin olunmuş yerə əlavə edir
insertAdjacentElement metodu,
elementi təyin olunmuş yerə əlavə edir
prepend metodu,
elementləri əvvələ əlavə edir
append metodu,
elementləri sona əlavə edir
appendChild metodu,
elementləri valideynin sonuna əlavə edir
insertBefore metodu,
elementləri elementdən əvvələ əlavə edir