Özet - DOM manipülasyonu
createElement ve appendChild ile bir yorum listesine yeni yorum ekleyen fonksiyon yazarsın.
DOM manipulasyonu özeti
Bu grupta öğeleri nasıl oluşturup değiştirdiğini gördün. document.createElement('tag') bellekte yeni öğe üretir; appendChild ile onu sayfaya eklersin. classList.add sınıf, setAttribute öznitelik yazar. innerHTML ve insertAdjacentHTML ise HTML dizeyi ayrıştırır.
Şimdi bunları birleştir: yorum listesine yeni yorum ekleyen bir fonksiyon yazacağız.
Uygulama Yorum ekleme fonksiyonu
addComment adında bir fonksiyon tanımla. Bir parametre alsın: text. Fonksiyon yeni bir <li> öğesi oluştursun, textContent'ine text değerini atasın, 'comment' sınıfını eklesin ve id'si comments olan <ul> öğesine eklesin.
Örnek çözümü göster
function addComment(text) {
const item = document.createElement('li');
item.textContent = text;
item.classList.add('comment');
document.querySelector('#comments').appendChild(item);
}Uygulama Etiket ekleme fonksiyonu
addTag adında bir fonksiyon tanımla. Bir parametre alsın: name. Fonksiyon yeni bir <span> öğesi oluştursun, textContent'ine name değeri atasın, 'tag' sınıfını eklesin ve id'si tags olan <div> öğesine eklesin.
Örnek çözümü göster
function addTag(name) {
const tag = document.createElement('span');
tag.textContent = name;
tag.classList.add('tag');
document.querySelector('#tags').appendChild(tag);
}Kendini test et
-
Metotları kullanımlarıyla eşleştir
- createElement
- Yeni öğe üretir
- appendChild
- Çocuğu ekler
- classList.add
- Sınıf ekler
- setAttribute
- Öznitelik yazar
-
Yeni öğeyi listeye ekle
const list = document.querySelector('#comments'); const item = document.createElement('li'); list.____(item);Cevabı göster
const list = document.querySelector('#comments'); const item = document.createElement('li'); list.appendChild(item);