insertAdjacentElement metodu
insertAdjacentElement metodu
səhifənin istənilən yerinə element əlavə etməyə imkan verir.
Ən çox createElement ilə
element yaradıldıqdan sonra istifadə olunur.
Kod istinad elementinə nisbətən əlavə olunur.
Istinad elementindən əvvəl əlavə etmək olar (əlavə etmə üsulu beforeBegin),
ondan sonra (əlavə etmə üsulu afterEnd),
həmçinin əvvəlinə (əlavə etmə üsulu afterBegin)
ya da sonuna (əlavə etmə üsulu beforeEnd)
istinad elementinin.
Sintaksis
istinad elementi.insertAdjacentElement(əlavə etmə üsulu, əlavə olunacaq kod);
Nümunə . beforeBegin üsulu
Fərz edək ki, istinad elementi #target elementidir.
Onun qarşısına yeni abzas əlavə edək:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Kodun icrasının nəticəsi:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Nümunə . afterEnd üsulu
İndi isə istinad elementindən sonra yeni abzas əlavə edək:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Kodun icrasının nəticəsi:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Nümunə . afterBegin üsulu
Istinad elementinin əvvəlinə yeni abzas əlavə edək:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Kodun icrasının nəticəsi:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Nümunə . beforeEnd üsulu
Istinad elementinin sonuna yeni abzas əlavə edək:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Kodun icrasının nəticəsi:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Həmçinin baxın
-
insertAdjacentHTMLmetodu,
teqləri təyin olunmuş yerə əlavə edir -
insertAdjacentTextmetodu,
mətni təyin olunmuş yerə əlavə edir -
prependmetodu,
elementləri əvvələ əlavə edir -
appendmetodu,
elementləri sona əlavə edir -
appendChildmetodu,
elementləri valideynin sonuna əlavə edir -
insertBeforemetodu,
elementləri elementdən əvvəl əlavə edir
