insertAdjacentHTML metodi

insertAdjacentHTML metodi sahifaning istalgan joyiga HTML kod qatorini qo'shish imkonini beradi. Kod asosiy elementga nisbatan qo'shiladi. Asosiy element oldidan (qo'shish usuli 'beforeBegin'), undan keyin (qo'shish usuli 'afterEnd'), shuningdek, asosiy element boshiga (qo'shish usuli 'afterBegin') yoki oxiriga (qo'shish usuli 'beforeEnd') qo'shish mumkin.

Sintaksis

asosiy element.insertAdjacentHTML(qo'shish usuli, qo'shiladigan kod);

Misol . beforeBegin usuli

Faraz qilaylik, asosiy element - bu #target elementi. Uning oldiga yangi abzas qo'shamiz:

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

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

Kod bajarish natijasi:

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

Misol . afterEnd usuli

Endi esa yangi abzasni asosiy elementdan keyin qo'shamiz:

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

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

Kod bajarish natijasi:

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

Misol . afterBegin usuli

Yangi abzasni asosiy element boshiga qo'shamiz:

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

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

Kod bajarish natijasi:

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

Misol . beforeEnd usuli

Yangi abzasni asosiy element oxiriga qo'shamiz:

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

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

Kod bajarish natijasi:

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

Shuningdek qarang

insertAdjacentText metodi,
bu matnni belgilangan joyga qo'shadi
insertAdjacentElement metodi,
bu elementni belgilangan joyga qo'shadi
prepend metodi,
bu elementlarni boshiga qo'shadi
append metodi,
bu elementlarni oxiriga qo'shadi
appendChild metodi,
bu elementlarni ota-element oxiriga qo'shadi
insertBefore metodi,
bu elementlarni element oldidan qo'shadi