crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Yeni Bir Eleman Oluşturma (createElement)
Sıfırdan bir HTML etiketi oluşturmak için document.createElement() metodunu kullanırız. Ancak bir elemanı sadece oluşturmak yetmez; ona içerik vermeli, stil tanımlamalı ve en önemlisi onu sayfanın bir yerine "asmak" gerekir.
Adım Adım Eleman Oluşturma:
[]Oluştur: Etiketi hafızada yaratın.
[]İçerik Ekle: İçine metin veya HTML koyun.- Yerleştir: Mevcut bir elemanın içine (parent) dahil edin.
JavaScript:
// 1. Yeni bir liste öğesi (li) oluşturalım
const yeniLi = document.createElement("li");
// 2. İçeriğini ve özelliklerini belirleyelim
yeniLi.innerText = "Yeni Görev Eklendi!";
yeniLi.classList.add("liste-item");
yeniLi.style.color = "blue";
// 3. Mevcut bir listeye (ul) ekleyelim
const liste = document.querySelector("#gorev-listesi");
liste.appendChild(yeniLi); // Listenin en sonuna ekler2. Eleman Yerleştirme Yöntemleri
Oluşturduğunuz elemanı nereye koyacağınız konusunda JavaScript size farklı seçenekler sunar:
[]appendChild(): Elemanı seçilen kapsayıcının en sonuna ekler.
[]prepend(): Elemanı seçilen kapsayıcının en başına ekler.- before() / after(): Elemanı seçilen başka bir elemanın hemen öncesine veya sonrasına (kardeş olarak) ekler.
JavaScript:
const anaBaslik = document.querySelector("h1");
const altBaslik = document.createElement("h2");
altBaslik.innerText = "Rehberin Devamı";
anaBaslik.after(altBaslik); // h1'in hemen altına h2 ekledik3. Eleman Silme (remove ve removeChild)
Artık ihtiyaç duyulmayan bir elemanı sayfadan kaldırmak oldukça basittir.
Modern Yöntem (remove):
Doğrudan hedef elemanı seçip yok edebilirsiniz.
JavaScript:
const silinecekEleman = document.querySelector(".reklam-alani");
silinecekEleman.remove();Eski Yöntem (removeChild):
Eğer sadece üst elemanı (parent) biliyorsanız, onun içindeki bir çocuğu silmek için kullanılır.
JavaScript:
const liste = document.querySelector("#liste");
const ilkEleman = liste.children[0];
liste.removeChild(ilkEleman);4. Daha Hızlı Bir Yol: innerHTML ile Dinamik İçerik
Bazen tek tek eleman oluşturmak yerine, büyük bir HTML bloğunu tek seferde eklemek daha pratik olabilir.
JavaScript:
const kartKonteyner = document.querySelector(".container");
// Mevcut içeriği bozmadan yeni bir kart ekleyelim
kartKonteyner.innerHTML += <div class="card"> <h3>Kullanıcı Kartı</h3> <p>Bu kart JavaScript ile oluşturuldu.</p> <button onclick="this.parentElement.remove()">Kapat</button> </div>;Pratik Uygulama: Dinamik Yorum Sistemi
JavaScript:
const yorumButonu = document.querySelector("#yorum-yap");
const yorumListesi = document.querySelector("#yorumlar");
const inputAlan = document.querySelector("#yorum-input");
yorumButonu.addEventListener("click", () => {
if (inputAlan.value === "") return; // Boş yorumu engelle
const li = document.createElement("li");
li.innerHTML = `${inputAlan.value} <button class="sil-btn">Sil</button>`;
// Silme butonuna işlev katalım
li.querySelector(".sil-btn").addEventListener("click", () => li.remove());
yorumListesi.prepend(li); // Yeni yorumu en başa ekle
inputAlan.value = ""; // Inputu temizle
});Sonuç
Dinamik içerik yönetimi, modern web sitelerinin olmazsa olmazıdır. createElement ile yapı taşlarını dizebilir, remove ile gereksizleri ayıklayabilirsiniz. Bu teknikler, React veya Vue gibi büyük kütüphanelerin temelinde yatan mantığın en yalın halidir.