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

eminbasbayan

4 dk okuma

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

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

Web sayfalarının çoğu kullanıcıya açıldığında sabit bir yapıya sahiptir. Ancak modern web uygulamaları, kullanıcı etkileşimleri veya bazı koşullara bağlı olarak sayfa içeriğini dinamik şekilde değiştirebilir. Bu dinamiklik, JavaScript’in DOM (Document Object Model) üzerindeki yetenekleriyle sağlanır. Bu makalede, bir web sayfasına JavaScript kullanarak yeni HTML elementleri oluşturmayı, bu elementlere içerik eklemeyi ve sayfaya yerleştirmeyi öğreneceğiz. Ayrıca bu yeni elementlerin nereye ve nasıl ekleneceğini belirlemek için kullanabileceğimiz yöntemleri de detaylı şekilde inceleyeceğiz.

1. `document.createElement()` ile Yeni Bir HTML Öğesi Oluşturmak

JavaScript’te bir HTML etiketi oluşturmak için ilk adım document.createElement() metodunu kullanmaktır. Bu yöntem, belirttiğiniz etiketi oluşturur ancak onu henüz sayfaya yerleştirmez.

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

Yukarıdaki kod, boş bir <div> etiketi oluşturur. Bu div henüz görünmez çünkü sayfaya eklenmemiştir ve içinde herhangi bir içerik yoktur.

2. Oluşturulan Elemente Özellik ve İçerik Eklemek

Yeni oluşturulan HTML öğesine içerik eklemek ya da özellik tanımlamak için bazı temel özellikleri kullanabiliriz:

a. Metin Ekleme

yeniDiv.innerText = "Hoş geldiniz!";

b. CSS Sınıfı Ekleme

yeniDiv.classList.add("karsilama-kutusu");

c. Stil Atama

yeniDiv.style.backgroundColor = "lightblue";

d. Görsel (img) Etiketi Oluşturma

const yeniResim = document.createElement("img");
yeniResim.src = "https://example.com/logo.png";
yeniResim.alt = "Site Logosu";

3. Sayfaya Yeni Element Eklemek

Yeni oluşturulan bir elementi sayfaya yerleştirmek için bir "ebeveyn" element seçilir ve bu elementin içine yerleştirme yapılır. En sık kullanılan yöntemler şunlardır:

a. `appendChild()`: Ebeveynin sonuna ekler

document.body.appendChild(yeniDiv);

b. `append()`: Birden fazla içerik veya metinle birlikte ekleme yapılabilir

const yeniSpan = document.createElement("span");
yeniSpan.innerText = "Bu önemli bir mesajdır.";
document.body.append(" ", yeniSpan);

c. `prepend()`: Ebeveynin başına yerleştirir

const baslik = document.createElement("h1");
baslik.innerText = "Duyuru";
document.body.prepend(baslik);

4. Sayfa İçindeki Mevcut Elementlere Yeni İçerik Eklemek

Sadece yeni öğeler oluşturmak değil, sayfa içinde zaten bulunan bir elemente de yeni içerik eklemek mümkündür. Örneğin, bir paragrafın sonuna yeni bir cümle ekleyebiliriz:

const paragraf = document.querySelector(".giris-paragraf");
paragraf.append(" Bu içerik JavaScript ile eklendi.");

Ya da aynı paragrafın başına içerik eklemek için:

paragraf.prepend("Önemli: ");

5. Kardeş Element Olarak Ekleme: `insertAdjacentElement()`

Bazı durumlarda, yeni öğeyi başka bir öğenin içine değil, önüne ya da arkasına yerleştirmek isteyebiliriz. Bu durumda insertAdjacentElement() metodu devreye girer. Bu yöntemle, dört farklı konumda yeni bir öğe ekleyebiliriz:

beforebegin – Hedef öğeden önce
afterbegin – Hedef öğenin içinde, başta
beforeend – Hedef öğenin içinde, sonda
afterend – Hedef öğeden sonra

Örnek: Bir başlığın hemen arkasına yeni bir alt başlık eklemek

const baslik = document.querySelector("h2");
const altBaslik = document.createElement("h3");
altBaslik.innerText = "Alt başlık buraya eklendi";
baslik.insertAdjacentElement("afterend", altBaslik);

Bu sayede altBaslik, doğrudan h2 öğesinden sonra gelir. Yani kardeş öğe (sibling) olur.

6. Modern ve Kısa Alternatifler: `before()` ve `after()`

Yeni tarayıcılarda (Internet Explorer hariç) kullanılabilen daha sade yöntemler de vardır:

Örnek: Bir öğeden sonra yeni öğe eklemek

const bilgiMetni = document.createElement("p");
bilgiMetni.innerText = "Bu bilgi kutusu ek olarak gösterilir.";
baslik.after(bilgiMetni);

Örnek: Bir öğeden önce yeni öğe eklemek

const uyarı = document.createElement("div");
uyarı.innerText = "Lütfen dikkatli okuyun.";
baslik.before(uyarı);

Bu kısa yazımlar, özellikle bir öğenin hemen yanına başka bir öğe eklerken oldukça pratik ve okunabilirdir.

Sonuç

Bu makalede JavaScript ile bir web sayfasına nasıl yeni HTML öğeleri ekleyebileceğimizi ve bu öğeleri nasıl özelleştirip konumlandırabileceğimizi öğrendik. Özetle:

document.createElement() ile yeni bir öğe oluşturulur.
innerText, src, classList.add() gibi özelliklerle içerik ve stil atanır.
append(), appendChild(), prepend() ile sayfaya yerleştirilir.
insertAdjacentElement() veya after(), before() gibi yöntemlerle belirli yerlere, özellikle kardeş olarak yerleştirme yapılabilir.

Tüm bu yöntemler, web sayfalarının sadece sabit yapılar olmaktan çıkıp, kullanıcı etkileşimlerine veya koşullara göre değişebilen esnek yapılar haline gelmesini sağlar. Bu da modern, dinamik ve kullanıcı dostu web siteleri geliştirmenin temel taşlarından biridir.