JavaScript HTML DOM tugunlari (Nodes)

Yangi HTML elementlarini (tugunlarni) yaratish

HTML DOM-ga yangi element qo'shish uchun avval elementning o'zini (element tugunini) yaratishingiz, so'ngra uni mavjud elementga biriktirishingiz kerak.

Misol

<div id="div1">
  <p id="p1">Bu birinchi paragraf.</p>
  <p id="p2">Bu ikkinchi paragraf.</p>
</div>

<script>
  // Element yaratish
  const para = document.createElement('p')

  // Matn tugunini yaratish
  const node = document.createTextNode('Bu yangi paragraf.')

  // Matnni element ichiga joylash
  para.appendChild(node)

  // Elementni div ichiga qo'shish
  const element = document.getElementById('div1')
  element.appendChild(para)
</script>

Misol tushuntirishi

1. Yangi <p> elementi yaratiladi: const para = document.createElement('p')
2. Matn qo'shish uchun matn tuguni yaratiladi: const node = document.createTextNode('Bu yangi paragraf.')
3. Matn tuguni <p> elementiga biriktiriladi: para.appendChild(node)
4. Nihoyat, yangi element mavjud elementga qo'shiladi: const element = document.getElementById('div1')element.appendChild(para)

---

insertBefore() metodi

appendChild() metodi yangi elementni otaning oxirgi farzandi sifatida qo'shadi. Agar siz buni xohlamasangiz, insertBefore() metodidan foydalanishingiz mumkin:

const element = document.getElementById('div1')
const child = document.getElementById('p1')

// 'para' elementini 'child' (p1) dan oldin qo'shish
element.insertBefore(para, child)

---

HTML elementlarini o'chirish

HTML elementini o'chirish uchun remove() metodidan foydalaning:

<div id="div1">
  <p id="p1">O'chiriladigan matn.</p>
  <p id="p2">Qoladigan matn.</p>
</div>

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

Brauzer yordami

remove() metodi juda eski brauzerlarda ishlamasligi mumkin. Bunday hollarda quyidagi removeChild() metodidan foydalaning.

---

Farzand tugunini o'chirish (removeChild)

remove() metodini qo'llab-quvvatlamaydigan brauzerlarda elementni o'chirish uchun uning otasini topishingiz kerak:

const parent = document.getElementById('div1')
const child = document.getElementById('p1')
parent.removeChild(child)

Buning osonroq yo'li — parentNode xususiyatidan foydalanish:

const child = document.getElementById('p1')
child.parentNode.removeChild(child)

---

HTML elementlarini almashtirish

HTML DOM-dagi elementni almashtirish uchun replaceChild() metodidan foydalaning:

const parent = document.getElementById('div1')
const child = document.getElementById('p1')

// 'para' (yangi element) bilan 'child' (eski element) ni almashtirish
parent.replaceChild(para, child)