appendChild ve removeChild
Bir öğeyi başka öğeye eklemeyi ve çıkarmayı öğrenirsin.
appendChild ile ekleme
Bir öğeyi sayfaya yerleştirmek için appendChild metodunu kullanırsın. Bu metodu bir ebeveyn öğe üzerinde çağırırsın ve parametre olarak eklenecek çocuğu verirsin.
const list = document.querySelector('ul');
const item = document.createElement('li');
list.appendChild(item);Öğe, ebeveynin son çocuğu olur. Aynı öğeyi ikinci kez eklersen, eski yerinden kaldırılır ve yeni yere taşınır; öğe çoğalmaz.
removeChild ile çıkarma
Bir öğeyi sayfadan kaldırmak için removeChild metodunu kullanırsın. Bu metod da ebeveyn üzerinde çağrılır ve kaldırılacak çocuğu parametre olarak alır.
const list = document.querySelector('ul');
const item = list.querySelector('li');
list.removeChild(item);Çocuğun ebeveynini bilmek zorunludur. Bu yüzden genellikle child.parentElement ile ebeveyne ulaşıp sonra removeChild çağrılır.
Uygulama Listeye öğe ekle
list değişkeni bir <ul> öğesini gösteriyor. item adında yeni bir <li> öğesi oluştur, textContent'ine kısa bir metin ata ve list'in sonuna ekle.
Örnek çözümü göster
const item = document.createElement('li');
item.textContent = 'Süt';
list.appendChild(item);Kendini test et
-
Hangisi item'ı list'e ekler?
const list = document.querySelector('ul'); const item = document.createElement('li'); // A item.appendChild(list); // B list.appendChild(); // C item.appendChild('list'); // D list.appendChild(item);- A
- B
- C
- D
Cevabı göster
D — Doğru! Ebeveyn.appendChild(child) sırasıyla çağrılır.
-
Öğeyi listeye ekle
const list = document.querySelector('ul'); const item = document.createElement('li'); list.____(item);Cevabı göster
const list = document.querySelector('ul'); const item = document.createElement('li'); list.appendChild(item); -
Metotları etkileriyle eşleştir
- appendChild(child)
- Çocuğu sona ekler
- removeChild(child)
- Çocuğu kaldırır
- querySelector(sel)
- İlk eşleşeni seçer