JavaScript DOM: Yeni HTML Öğeleri Oluşturma ve Yerleştirme

Şimdiye kadar var olan elementleri seçip manipüle ettik. Peki ya sıfırdan yeni bir element oluşturup sayfaya eklemek istersek?

JavaScript ile:

Yeni HTML elementleri oluşturabilirsiniz
İçerik ve özellik ekleyebilirsiniz
DOM'un istediğiniz yerine yerleştirebilirsiniz

Bu makalede createElement, appendChild, append, prepend ve daha fazlasını öğreneceğiz!

createElement() - Element Oluşturma

Yeni bir HTML elementi oluşturmak için document.createElement() kullanılır.

Sözdizimi

javascript

document.createElement("etiket-adi")

Örnekler

javascript

// Boş bir div oluştur
const yeniDiv = document.createElement("div");

// Boş bir paragraf oluştur
const yeniP = document.createElement("p");

// Boş bir resim oluştur
const yeniImg = document.createElement("img");

// Boş bir buton oluştur
const yeniBtn = document.createElement("button");

// Boş bir liste öğesi oluştur
const yeniLi = document.createElement("li");

Not: createElement sadece elementi oluşturur, sayfaya eklemez! Element henüz DOM'da değil, sadece JavaScript'te var.

Oluşturulan Elementi Doldurmak

Boş bir element işe yaramaz. İçerik ve özellikler eklememiz gerekir.

İçerik Ekleme

javascript

const yeniP = document.createElement("p");

// Metin içeriği ekle
yeniP.innerText = "Bu yeni bir paragraftır!";

// veya HTML içeriği ekle
yeniP.innerHTML = "Bu <strong>önemli</strong> bir paragraftır!";

Özellik (Attribute) Ekleme

javascript

const yeniImg = document.createElement("img");

// src ve alt ekle
yeniImg.src = "foto.jpg";
yeniImg.alt = "Güzel bir manzara";

// veya setAttribute ile
yeniImg.setAttribute("src", "foto.jpg");
yeniImg.setAttribute("alt", "Güzel bir manzara");

Class Ekleme

javascript

const yeniDiv = document.createElement("div");

// classList ile
yeniDiv.classList.add("kart");
yeniDiv.classList.add("vurgulu");

// veya className ile
yeniDiv.className = "kart vurgulu";

ID Ekleme

javascript

const yeniDiv = document.createElement("div");
yeniDiv.id = "ana-kutu";

Stil Ekleme

javascript

const yeniDiv = document.createElement("div");
yeniDiv.style.backgroundColor = "lightblue";
yeniDiv.style.padding = "20px";
yeniDiv.style.borderRadius = "10px";

appendChild() - Sona Ekleme

appendChild() metodu, bir elementi başka bir elementin son çocuğu olarak ekler.

Sözdizimi

javascript

parentElement.appendChild(yeniElement)

Örnek

html

<ul id="liste">
    <li>Mevcut Öğe 1</li>
    <li>Mevcut Öğe 2</li>
</ul>

javascript

// Yeni li oluştur
const yeniLi = document.createElement("li");
yeniLi.innerText = "Yeni Öğe 3";

// Listeye ekle
const liste = document.querySelector("#liste");
liste.appendChild(yeniLi);

Sonuç:

html

<ul id="liste">
    <li>Mevcut Öğe 1</li>
    <li>Mevcut Öğe 2</li>
    <li>Yeni Öğe 3</li>  <!-- Yeni eklendi -->
</ul>

Body'ye Ekleme

javascript

const yeniH1 = document.createElement("h1");
yeniH1.innerText = "Merhaba Dünya!";

// Body'nin sonuna ekle
document.body.appendChild(yeniH1);

append() - Modern Ekleme

append() metodu, appendChild()'ın modern ve daha güçlü versiyonudur.

appendChild vs append Farkları

Özellik	appendChild()	append()
Metin ekleme	❌ Sadece element	✅ Metin de ekleyebilir
Çoklu ekleme	❌ Tek element	✅ Birden fazla
Dönüş değeri	Eklenen element	undefined
IE desteği	✅ Var	❌ Yok

Metin Ekleme

javascript

const p = document.querySelector("p");

// append ile metin ekle
p.append(" - Ek metin");  // Çalışır!

// appendChild ile metin ekle
p.appendChild(" - Ek metin");  // HATA! Node bekleniyor

Birden Fazla Element Ekleme

javascript

const liste = document.querySelector("#liste");

const li1 = document.createElement("li");
li1.innerText = "Öğe 1";

const li2 = document.createElement("li");
li2.innerText = "Öğe 2";

const li3 = document.createElement("li");
li3.innerText = "Öğe 3";

// append ile hepsini tek seferde ekle
liste.append(li1, li2, li3);

// appendChild ile tek tek eklemen gerekirdi
// liste.appendChild(li1);
// liste.appendChild(li2);
// liste.appendChild(li3);

Element ve Metin Karışık

javascript

const div = document.querySelector("#container");
const span = document.createElement("span");
span.innerText = "Önemli";

div.append("Bu ", span, " bir mesajdır.");
// Sonuç: "Bu <span>Önemli</span> bir mesajdır."

prepend() - Başa Ekleme

prepend() metodu, elementi ilk çocuk olarak ekler (başa).

html

<ul id="liste">
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

javascript

const yeniLi = document.createElement("li");
yeniLi.innerText = "Öğe 1 (Yeni)";

const liste = document.querySelector("#liste");
liste.prepend(yeniLi);

Sonuç:

html

<ul id="liste">
    <li>Öğe 1 (Yeni)</li>  <!-- Başa eklendi -->
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

prepend ile Metin

javascript

const baslik = document.querySelector("h1");
baslik.prepend("🎉 ");  // Başına emoji ekle

before() ve after() - Kardeş Olarak Ekleme

before() ve after() metodları, elementi kardeş olarak ekler (içine değil, yanına).

after() - Sonrasına Ekle

html

<h1 id="baslik">Ana Başlık</h1>
<p>Paragraf</p>

javascript

const baslik = document.querySelector("#baslik");

const altBaslik = document.createElement("h2");
altBaslik.innerText = "Alt Başlık";

// h1'den SONRA ekle (kardeş olarak)
baslik.after(altBaslik);

Sonuç:

html

<h1 id="baslik">Ana Başlık</h1>
<h2>Alt Başlık</h2>  <!-- h1'in kardeşi olarak eklendi -->
<p>Paragraf</p>

before() - Öncesine Ekle

javascript

const paragraf = document.querySelector("p");

const uyari = document.createElement("div");
uyari.innerText = "Dikkat!";
uyari.classList.add("uyari");

// p'den ÖNCE ekle
paragraf.before(uyari);

insertAdjacentElement() - Esnek Konumlandırma

insertAdjacentElement() metodu, 4 farklı konuma element eklemenizi sağlar.

Sözdizimi

javascript

element.insertAdjacentElement(konum, yeniElement)

Konum Seçenekleri

metin

<!-- beforebegin -->
<div id="hedef">
    <!-- afterbegin -->
    İçerik
    <!-- beforeend -->
</div>
<!-- afterend -->

Konum	Açıklama
`"beforebegin"`	Elementin öncesine (kardeş)
`"afterbegin"`	Elementin içine, başa (ilk çocuk)
`"beforeend"`	Elementin içine, sona (son çocuk)
`"afterend"`	Elementin sonrasına (kardeş)

Örnek

html

<div id="kutu">
    <p>Mevcut içerik</p>
</div>

javascript

const kutu = document.querySelector("#kutu");

// beforebegin - öncesine
const onceki = document.createElement("h2");
onceki.innerText = "Kutudan Önce";
kutu.insertAdjacentElement("beforebegin", onceki);

// afterbegin - içine, başa
const ilk = document.createElement("p");
ilk.innerText = "İlk paragraf";
kutu.insertAdjacentElement("afterbegin", ilk);

// beforeend - içine, sona
const son = document.createElement("p");
son.innerText = "Son paragraf";
kutu.insertAdjacentElement("beforeend", son);

// afterend - sonrasına
const sonraki = document.createElement("h2");
sonraki.innerText = "Kutudan Sonra";
kutu.insertAdjacentElement("afterend", sonraki);

Sonuç:

html

<h2>Kutudan Önce</h2>
<div id="kutu">
    <p>İlk paragraf</p>
    <p>Mevcut içerik</p>
    <p>Son paragraf</p>
</div>
<h2>Kutudan Sonra</h2>

insertAdjacentHTML() - HTML String Ekleme

Element oluşturmadan direkt HTML string eklemek için kullanılır.

javascript

const liste = document.querySelector("#liste");

// HTML string olarak ekle
liste.insertAdjacentHTML("beforeend", "<li>Yeni öğe</li>");
liste.insertAdjacentHTML("afterbegin", "<li>İlk öğe</li>");

Dikkat: Kullanıcı girdisi ile kullanırken XSS güvenlik riskine dikkat edin!

Pratik Örnekler

Örnek 1: Dinamik Liste Oluşturma

html

<ul id="gorev-listesi"></ul>
<input type="text" id="gorev-input" placeholder="Yeni görev">
<button id="ekle-btn">Ekle</button>

javascript

const liste = document.querySelector("#gorev-listesi");
const input = document.querySelector("#gorev-input");
const ekleBtn = document.querySelector("#ekle-btn");

ekleBtn.addEventListener("click", function() {
    const gorevMetni = input.value.trim();

    if (gorevMetni) {
        // Yeni li oluştur
        const yeniLi = document.createElement("li");
        yeniLi.innerText = gorevMetni;

        // Listeye ekle
        liste.appendChild(yeniLi);

        // Input'u temizle
        input.value = "";
    }
});

Örnek 2: Kart Bileşeni Oluşturma

javascript

function kartOlustur(baslik, aciklama, resimUrl) {
    // Ana kart div'i
    const kart = document.createElement("div");
    kart.classList.add("kart");

    // Resim
    const img = document.createElement("img");
    img.src = resimUrl;
    img.alt = baslik;

    // Başlık
    const h3 = document.createElement("h3");
    h3.innerText = baslik;

    // Açıklama
    const p = document.createElement("p");
    p.innerText = aciklama;

    // Hepsini kart'a ekle
    kart.append(img, h3, p);

    return kart;
}

// Kullanım
const yeniKart = kartOlustur(
    "JavaScript",
    "Web programlama dili",
    "js-logo.png"
);

document.body.appendChild(yeniKart);

Örnek 3: Tablo Satırı Ekleme

html

<table id="urun-tablosu">
    <thead>
        <tr>
            <th>Ürün</th>
            <th>Fiyat</th>
            <th>Stok</th>
        </tr>
    </thead>
    <tbody id="tablo-body">
    </tbody>
</table>

javascript

function satirEkle(urun, fiyat, stok) {
    const tr = document.createElement("tr");

    const tdUrun = document.createElement("td");
    tdUrun.innerText = urun;

    const tdFiyat = document.createElement("td");
    tdFiyat.innerText = fiyat + " TL";

    const tdStok = document.createElement("td");
    tdStok.innerText = stok;

    tr.append(tdUrun, tdFiyat, tdStok);

    document.querySelector("#tablo-body").appendChild(tr);
}

// Kullanım
satirEkle("Laptop", 15000, 5);
satirEkle("Telefon", 8000, 12);
satirEkle("Tablet", 6000, 8);

Örnek 4: Bildirim Gösterme

javascript

function bildirimGoster(mesaj, tur = "info") {
    // Bildirim elementi oluştur
    const bildirim = document.createElement("div");
    bildirim.classList.add("bildirim", tur);
    bildirim.innerText = mesaj;

    // Kapat butonu
    const kapatBtn = document.createElement("button");
    kapatBtn.innerText = "×";
    kapatBtn.classList.add("kapat-btn");
    kapatBtn.addEventListener("click", () => bildirim.remove());

    bildirim.appendChild(kapatBtn);

    // Body'nin başına ekle
    document.body.prepend(bildirim);

    // 5 saniye sonra otomatik kaldır
    setTimeout(() => bildirim.remove(), 5000);
}

// Kullanım
bildirimGoster("İşlem başarılı!", "basari");
bildirimGoster("Bir hata oluştu!", "hata");
bildirimGoster("Bilgilendirme mesajı", "info");

Örnek 5: Yorum Ekleme Sistemi

html

<div id="yorumlar">
    <h3>Yorumlar</h3>
</div>
<textarea id="yorum-input" placeholder="Yorumunuzu yazın..."></textarea>
<button id="yorum-btn">Yorum Ekle</button>

javascript

const yorumlarDiv = document.querySelector("#yorumlar");
const yorumInput = document.querySelector("#yorum-input");
const yorumBtn = document.querySelector("#yorum-btn");

yorumBtn.addEventListener("click", function() {
    const yorumMetni = yorumInput.value.trim();

    if (yorumMetni) {
        // Yorum kutusu
        const yorumKutusu = document.createElement("div");
        yorumKutusu.classList.add("yorum");

        // Tarih
        const tarih = document.createElement("small");
        tarih.innerText = new Date().toLocaleString("tr-TR");

        // Yorum metni
        const metin = document.createElement("p");
        metin.innerText = yorumMetni;

        yorumKutusu.append(tarih, metin);
        yorumlarDiv.appendChild(yorumKutusu);

        yorumInput.value = "";
    }
});

Örnek 6: Dinamik Menü Oluşturma

javascript

const menuOgeleri = [
    { ad: "Ana Sayfa", link: "/" },
    { ad: "Ürünler", link: "/urunler" },
    { ad: "Hakkımızda", link: "/hakkimizda" },
    { ad: "İletişim", link: "/iletisim" }
];

function menuOlustur(ogeler) {
    const nav = document.createElement("nav");
    nav.classList.add("ana-menu");

    const ul = document.createElement("ul");

    ogeler.forEach(oge => {
        const li = document.createElement("li");

        const a = document.createElement("a");
        a.href = oge.link;
        a.innerText = oge.ad;

        li.appendChild(a);
        ul.appendChild(li);
    });

    nav.appendChild(ul);
    return nav;
}

// Menüyü body'nin başına ekle
const menu = menuOlustur(menuOgeleri);
document.body.prepend(menu);

Metod Karşılaştırma Tablosu

Metod	Konum	Metin Desteği	Çoklu Ekleme
`appendChild()`	Son çocuk	❌	❌
`append()`	Son çocuk	✅	✅
`prepend()`	İlk çocuk	✅	✅
`before()`	Önceki kardeş	✅	✅
`after()`	Sonraki kardeş	✅	✅
`insertAdjacentElement()`	4 konum	❌	❌

Özet

javascript

// ELEMENT OLUŞTURMA
const element = document.createElement("div");
element.innerText = "İçerik";
element.classList.add("sinif");
element.id = "kimlik";

// SONA EKLEME (Son çocuk)
parent.appendChild(element);  // Klasik
parent.append(element);       // Modern

// BAŞA EKLEME (İlk çocuk)
parent.prepend(element);

// KARDEŞ OLARAK EKLEME
kardes.before(element);   // Öncesine
kardes.after(element);    // Sonrasına

// ESNEK KONUMLANDIRMA
hedef.insertAdjacentElement("beforebegin", element);
hedef.insertAdjacentElement("afterbegin", element);
hedef.insertAdjacentElement("beforeend", element);
hedef.insertAdjacentElement("afterend", element);

Sırada Ne Var?

Element oluşturmayı ve eklemeyi öğrendik. Peki elementleri silmek istersek?

Bir sonraki makalede removeChild & remove konusunu öğreneceğiz - DOM'dan element kaldırma yolları.

createElement() - Element Oluşturma

Sözdizimi

Örnekler

Oluşturulan Elementi Doldurmak

İçerik Ekleme

Özellik (Attribute) Ekleme

Class Ekleme

ID Ekleme

Stil Ekleme

appendChild() - Sona Ekleme

Sözdizimi

Örnek

Body'ye Ekleme

append() - Modern Ekleme

appendChild vs append Farkları

Metin Ekleme

Birden Fazla Element Ekleme

Element ve Metin Karışık

prepend() - Başa Ekleme

prepend ile Metin

before() ve after() - Kardeş Olarak Ekleme

after() - Sonrasına Ekle

before() - Öncesine Ekle

insertAdjacentElement() - Esnek Konumlandırma

Sözdizimi

Konum Seçenekleri

Örnek

insertAdjacentHTML() - HTML String Ekleme

Pratik Örnekler

Örnek 1: Dinamik Liste Oluşturma

Örnek 2: Kart Bileşeni Oluşturma

Örnek 3: Tablo Satırı Ekleme

Örnek 4: Bildirim Gösterme

Örnek 5: Yorum Ekleme Sistemi

Örnek 6: Dinamik Menü Oluşturma

Metod Karşılaştırma Tablosu

Özet

Sırada Ne Var?

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword