DOM tugunlari (Nodes)

Tugunlarni (HTML elementlarini) qo‘shish va olib tashlash

Yangi HTML elementlarini (tugunlarni) yaratish

HTML DOM-ga yangi element qo‘shish uchun avval elementni (element tugunini) yaratishingiz va keyin uni mavjud elementga qo‘shishingiz kerak.

Misol

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

O‘zingiz sinab ko‘ring »

Misol tahlili

Bu kod yangi <p> elementini yaratadi:

const para = document.createElement("p");

<p> elementiga matn qo‘shish uchun avval matn tugunini yaratishingiz kerak. Ushbu kod matn tugunini yaratadi:

const node = document.createTextNode("This is a new paragraph.");

Keyin matn tugunini <p> elementiga qo‘shishingiz kerak:

para.appendChild(node);

Nihoyat, yangi elementni mavjud elementga qo‘shishingiz kerak.

Ushbu kod mavjud elementni topadi:

const element = document.getElementById("div1");

Ushbu kod yangi elementni mavjud elementga qo‘shadi:

element.appendChild(para);

Yangi HTML elementlarini yaratish - insertBefore()

Oldingi misoldagi appendChild() usuli yangi elementni ota-onaning oxirgi farzandi sifatida qo‘shdi.

Agar buni xohlamasangiz, insertBefore() usulidan foydalanishingiz mumkin:

Misol

O‘zingiz sinab ko‘ring »

Mavjud HTML elementlarini o‘chirish

HTML elementini olib tashlash uchun remove() dan foydalaning metod:

Misol

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

O‘zingiz sinab ko‘ring »

Misol tahlili

HTML hujjatida ikkita tugunli (ikki <p>) <div> elementi mavjud elementlar):

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

O‘chirmoqchi bo‘lgan elementni toping:

const elmnt = document.getElementById("p1");

Keyin ushbu elementda remove() usulini bajaring:

elmnt.remove();

remove() usuli ishlamaydi eski brauzerlar uchun removeChild() o‘rniga qanday foydalanish haqida quyidagi misolga qarang.

Bola tugunni olib tashlash

remove() usulini qo‘llab-quvvatlamaydigan brauzerlar uchun siz ni topishingiz kerak elementni olib tashlash uchun asosiy tugun:

Misol

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

O‘zingiz sinab ko‘ring »

Misol tahlili

Ushbu HTML hujjatida ikkita tugunli (ikki <p>) <div> element mavjud elementlar):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

id="div1" bo‘lgan elementni toping:

const parent = document.getElementById("div1");

id="p1" bo‘lgan <p> elementini toping:

const child = document.getElementById("p1");

Bolani ota-onadan olib tashlang:

parent.removeChild(child);

Mana umumiy vaqtinchalik yechim: O‘chirmoqchi bo‘lgan bolani toping va ota-onani topish uchun uning parentNode xususiyatidan foydalaning:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

HTML elementlarini almashtirish

Elementni HTML DOM ga almashtirish uchun replaceChild() usulidan foydalaning:

Misol

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish