JavaScriptda elementlar yaratish va joylashtirish

Hozir biz JavaScript orqali yangi DOM elementlarini qanday yaratishni va ularni sahifaga qo‘shishni o‘rganamiz. Buning uchun createElement metodi ishlatiladi. Ushbu metodning parametri sifatida yaratilishi kerak bo‘lgan tegning nomi beriladi.

Agar createElement ning natijasini o‘zgaruvchiga yozsak, bu o‘zgaruvchi querySelector orqali olingan elementga o‘xshash bo‘ladi.

Yagona farq - bizning elementimiz sahifada joylashgan bo‘lmaydi. Shunday qilib biz unga matn, atributlarni o‘zgartirish, hodisalar qayta ishlovchilarini o‘rnatish va oxirida uni sahifaga joylashtirishimiz mumkin.

Yangi elementni sahifaga joylashtirish uchun appendChild metodi qo‘llaniladi. Ushbu metod elementga nisbatan qo‘llaniladi, unga biz o‘z elementimizni joylamoqchimiz. Metod parametri sifatida oldingi createElement orqali yaratilgan yangi element beriladi.

Keling, amaliy misolni ko‘rib chiqaylik. Faraz qilaylik bizda div va uning ichida bir nechta abzatslar mavjud:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Keling, abzats yaratamiz, unga matn o‘rnatamiz va sahifada #parent blokining oxiriga joylaymiz:

let parent = document.querySelector('#parent');

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

parent.appendChild(p);

Kodni bajarish natijasi:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

ol berilgan:

<ol id="elem"></ol>

Uning oxiriga li ni 'item' matni bilan qo‘shing.

ol va tugma berilgan:

<ol id="elem"></ol>
<button id="button">click me</button>

Tugma bosilganda ro‘yxat oxiriga 'item' matni bilan li qo‘shiladigan qiling.