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);

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

Sıradaki ders: classList API

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler