insertAdjacentElement usuli

insertAdjacentElement usuli elementni sahifaning istalgan joyiga kiritishga imkon beradi. Ko'pincha createElement yordamida element yaratilgandan keyin ishlatiladi. Kod asosiy elementga nisbatan kiritiladi. Asosiy element oldidan (beforeBegin kiritish usuli), undan keyin (afterEnd kiritish usuli), shuningdek, asosiy elementning boshiga (afterBegin kiritish usuli) yoki oxiriga (beforeEnd kiritish usuli) kiritish mumkin.

Sintaksis

asosiy element.insertAdjacentElement(kiritish usuli, kiritiladigan kod);

Misol . `beforeBegin` usuli

Faraz qilaylik, asosiy element - bu #target elementi. Keling, uning oldiga yangi abzats kiritamiz:

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

let p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

Kodni bajarish natijasi:

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

Misol . `afterEnd` usuli

Endi esa asosiy elementdan keyin yangi abzats kiritamiz:

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

let p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

Kodni bajarish natijasi:

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

Misol . `afterBegin` usuli

Keling, asosiy elementning boshiga yangi abzats kiritamiz:

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

let p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

Kodni bajarish natijasi:

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

Misol . `beforeEnd` usuli

Keling, asosiy elementning oxiriga yangi abzats kiritamiz:

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

let p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

Kodni bajarish natijasi:

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

Shuningdek qarang

insertAdjacentHTML usuli,
belgilangan joyga teglarni kiritadi
insertAdjacentText usuli,
belgilangan joyga matnni kiritadi
prepend usuli,
elementlarni boshiga kiritadi
append usuli,
elementlarni oxiriga kiritadi
appendChild usuli,
elementlarni ota-elementning oxiriga kiritadi
insertBefore usuli,
elementlarni element oldidan kiritadi

insertAdjacentElement usuli

Sintaksis

Misol . beforeBegin usuli

Misol . afterEnd usuli

Misol . afterBegin usuli

Misol . beforeEnd usuli

Shuningdek qarang

Misol . `beforeBegin` usuli

Misol . `afterEnd` usuli

Misol . `afterBegin` usuli

Misol . `beforeEnd` usuli