JavaScript ile Sayfa İçeriği Dinamik Olarak Nasıl Eklenir?
JavaScript kullanarak web sayfasına dinamik olarak içerik eklemek mümkündür. Bu makalede DOM manipülasyonuyla nasıl yeni elemanlar ekleyebileceğinizi örneklerle açıklıyoruz.
JavaScript ile Sayfa İçeriği Dinamik Olarak Nasıl Eklenir?
22 Şubat 2026
Web geliştirme dünyasında dinamik içerik eklemek kullanıcı deneyimini zenginleştirir ve sayfa etkileşimini artırır. JavaScript, DOM (Document Object Model) manipülasyonu ile sayfa üzerindeki öğeleri değiştirmemize, eklememize veya silmemize olanak tanır.
JavaScript ile Dinamik İçerik Eklemenin Temelleri
Öncelikle, HTML'de içerik ekleyeceğimiz bir konteyner (örneğin bir <div>) tanımlamalıyız. Ardından JavaScript ile bu konteynere yeni elementler ekleyebiliriz.
Basit Bir Örnek
Bir butona tıkladığımızda, sayfaya yeni bir paragraf ekleyelim:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dinamik İçerik Ekleme</title>
</head>
<body>
<div id="icerik">
<h2>Dinamik İçerik Alanı</h2>
</div>
<button id="ekleButton">Yeni Paragraf Ekle</button>
<script>
const container = document.getElementById('icerik');
const button = document.getElementById('ekleButton');
button.addEventListener('click', () => {
const p = document.createElement('p');
p.textContent = 'Bu paragraf JavaScript ile eklendi!';
container.appendChild(p);
});
</script>
</body>
</html>
Açıklamalar
document.createElement('p')ile yeni bir <p> elementi oluşturulur.textContentile paragrafın içine yazı eklenir.appendChildile bu yeni paragraf mevcut div içerisine eklenir.- Bir butona tıklama olayı ile bu işlemler tetiklenir.
Farklı İçerik Tipleri Eklemek
Yalnızca paragraf değil, resim, liste veya diğer HTML elemanlarını da benzer şekilde oluşturabilir ve ekleyebilirsiniz:
// Resim ekleme örneği
const img = document.createElement('img');
img.src = 'https://via.placeholder.com/150';
img.alt = 'Örnek Resim';
container.appendChild(img);
// Liste ekleme örneği
const ul = document.createElement('ul');
['Elma', 'Armut', 'Muz'].forEach(fruit => {
const li = document.createElement('li');
li.textContent = fruit;
ul.appendChild(li);
});
container.appendChild(ul);
Sonuç
JavaScript'in en güçlü özelliklerinden biri DOM manipülasyonu sayesinde sayfa içeriğini istediğiniz gibi dinamik hale getirebilmenizdir. createElement, appendChild, ve olay dinleyicileri ile kullanıcı etkileşimlerine uygun içerikler ekleyebilirsiniz. Bu teknik, interaktif ve kullanıcı dostu web sayfaları oluşturmak için vazgeçilmezdir.