Kod Atölyesi
Yapay Zeka
HTML Dersleri
CSS Dersleri
JavaScript Dersleri
İçindekiler
Web geliştirme sürecinde sıkça karşılaşılan ihtiyaçlardan biri, HTML içerisinde yer alan liste (ul, ol) elemanlarına erişim sağlamak ve bu listelere dinamik bir şekilde yeni öğeler eklemektir. Özellikle kullanıcı etkileşimi gerektiren dinamik web uygulamalarında, liste elemanlarını güncellemek, yeni verileri göstermek veya kullanıcıdan alınan bilgileri listeye aktarmak büyük önem taşır. Bu yazımızda JavaScript yardımıyla liste içerisindeki öğelere nasıl erişebileceğimizi ve nasıl yeni öğeler ekleyebileceğimizi adım adım örneklerle açıklayacağız. Ayrıca SEO uyumlu olması için anahtar kelimelere de dikkat ederek hazırladık.
1. HTML Listesi Nasıl Oluşturulur?
JavaScript ile çalışmadan önce temel bir HTML listesi oluşturalım. Bu örnekte meyve adlarını içeren bir ul listesi kullanacağız:
<ul id="meyveListesi">
<li>Elma</li>
<li>Muz</li>
<li>Çilek</li>
</ul>
Bu yapı sayesinde JavaScript ile bu listeye erişebilir, içeriğini okuyabilir veya yeni öğeler ekleyebiliriz. Şimdi JavaScript ile bu liste üzerinde nasıl işlem yapılır bakalım.
2. JavaScript ile Liste Öğelerine Erişmek
Liste elemanlarına erişmek için birkaç farklı DOM yöntemi kullanılabilir. En yaygın kullanılan yöntemler getElementById, getElementsByTagName, querySelector ve querySelectorAll‘dur.
const liste = document.getElementById("meyveListesi");
const ogeler = liste.getElementsByTagName("li");
console.log(ogeler[0].textContent); // "Elma"
Bu örnekte, meyve listesine id aracılığıyla eriştik ve ilk li öğesinin içeriğini textContent ile aldık. Bu yöntemle listedeki her öğeye indeks numarasıyla ulaşabilirsiniz.
Alternatif Yöntemler:
const ilkOge = document.querySelector("ul li");
console.log(ilkOge.textContent); // "Elma"
const tumOgeler = document.querySelectorAll("li");
tumOgeler.forEach((oge, index) => {
console.log(index + ": " + oge.textContent);
});
Bu örneklerde querySelector sadece ilk öğeyi dönerken, querySelectorAll tüm öğeleri bir NodeList olarak döndürür. forEach ile tüm öğeleri dolaşmak oldukça pratiktir.
3. JavaScript ile Listeye Yeni Öğe Eklemek
Yeni öğe eklemek için temel adımlar şunlardır:
document.createElement("li")ile yeni birlioluşturmaktextContentile içeriğini belirlemekappendChild()ya dainsertBefore()ile listeye eklemek
const yeniOge = document.createElement("li");
yeniOge.textContent = "Kivi";
liste.appendChild(yeniOge); // Listenin sonuna eklenir
Listenin Başına Öğe Eklemek:
liste.insertBefore(yeniOge, liste.firstChild);
Belirli Bir Konuma Öğe Eklemek:
const ikinciOge = liste.getElementsByTagName("li")[1];
liste.insertBefore(yeniOge, ikinciOge); // 2. sıraya yerleştirir
Bu yöntemler sayesinde liste üzerinde tam kontrol sağlayabilirsiniz. Özellikle kullanıcıya göre sıralama yapmanız gerektiğinde bu tür yerleştirme teknikleri çok işe yarar.
4. Kullanıcıdan Alınan Veriyle Listeyi Güncellemek
HTML input elemanlarından aldığımız kullanıcı verilerini listeye eklemek oldukça yaygın bir uygulamadır. Aşağıda, kullanıcıdan meyve adını alarak listeye ekleyen bir örnek göreceksiniz:
<input type="text" id="yeniMeyve" placeholder="Meyve girin">
<button onclick="ekle()">Ekle</button>
<script>
function ekle() {
const input = document.getElementById("yeniMeyve");
const meyveAdi = input.value.trim();
if (meyveAdi === "") {
alert("Lütfen geçerli bir meyve adı girin.");
return;
}
const yeniOge = document.createElement("li");
yeniOge.textContent = meyveAdi;
document.getElementById("meyveListesi").appendChild(yeniOge);
input.value = "";
input.focus();
}
</script>
Bu örnekte:
- Kullanıcı boşluk girerse uyarı verilir.
appendChildile öğe sonuna eklenir.input.focus()ile kullanıcı tekrar giriş yapmaya yönlendirilir.
5. Dinamik Liste Güncellemeleri ve Stil Ekleme
JavaScript sadece içerik eklemekle sınırlı değildir. Aynı zamanda eklenen öğelere stil sınıfları da ekleyebilirsiniz:
yeniOge.classList.add("liste-ogesi");
CSS ile bu sınıfı tanımlayarak öğelere görsel efektler, arka plan rengi veya ikonlar ekleyebilirsiniz. Örneğin:
.liste-ogesi {
color: green;
font-weight: bold;
}
6. SEO Uyumlu İçerik Yazımı İçin İpuçları
Bu yazıda “listeye yeni öğe eklemek”, “liste içerisindeki öğeye erişmek”, “JavaScript ile liste düzenleme” gibi SEO açısından değerli anahtar kelimeler belirli oranlarda ve doğal bir şekilde kullanıldı. Google’da daha görünür olmak için:
- Anahtar kelimeleri başlıklarda ve ilk paragraflarda yerleştirin.
- Kod blokları kullanıcıların sorunlarını çözecek nitelikte olmalı.
- HTML yapınızda heading (h2, h3) yapısına sadık kalın.
- Sayfa hızınız yüksek olmalı ve mobil uyumluluk unutulmamalı.
- Görsellerle desteklerseniz kullanıcı etkileşimi artar.
7. Gelişmiş Uygulama Fikri: Listeye Silme Butonu Eklemek
Her öğenin yanına bir silme butonu eklemek kullanıcı deneyimini artırır. Basit bir örnek:
function ekle() {
const input = document.getElementById("yeniMeyve");
const meyveAdi = input.value.trim();
if (meyveAdi === "") return;
const yeniOge = document.createElement("li");
yeniOge.textContent = meyveAdi;
const silBtn = document.createElement("button");
silBtn.textContent = "Sil";
silBtn.onclick = function() {
yeniOge.remove();
};
yeniOge.appendChild(silBtn);
document.getElementById("meyveListesi").appendChild(yeniOge);
input.value = "";
}
Bu örnekle kullanıcı listeye öğe ekleyip, dilerse tek tıklamayla silebilir.
Sonuç
JavaScript ile liste elemanlarına erişmek, mevcut öğeleri yönetmek ve kullanıcı etkileşimiyle yeni öğeler eklemek, web geliştirme süreçlerinin olmazsa olmazlarındandır. Bu yazıda öğrendiklerinizle birlikte artık HTML listeler üzerinde tam kontrole sahipsiniz. Liste içerisindeki öğeye erişmek ve listeye yeni öğe eklemek konusuna hakim olmak, dinamik kullanıcı arayüzleri oluşturmanızda size büyük avantaj sağlar. Daha fazlası için “Javascript” kategorisine bakabilirsin.
JavaScript ile bir liste elemanına nasıl erişebilirim?
JavaScript’te bir
<li>öğesine erişmek içindocument.getElementById,getElementsByTagName,querySelectorveyaquerySelectorAllgibi DOM yöntemleri kullanılır.HTML listesine yeni öğe eklemek için hangi JavaScript komutu kullanılır?
Yeni bir öğe eklemek için önce
document.createElement("li")ile öğe oluşturulur, ardındanappendChild()veyainsertBefore()ile listeye eklenir.Yeni öğeyi listenin en başına nasıl ekleyebilirim?
Listenin başına öğe eklemek için
insertBefore()kullanılır:liste.insertBefore(yeniOge, liste.firstChild);isteye eklenen öğeyi silmek mümkün mü?
Evet. Her öğeye bir silme düğmesi ekleyerek aşağıdaki gibi silebilirsiniz:
yeniOge.addEventListener("click", () => { yeniOge.remove(); });JavaScript ile oluşturulan öğeler kalıcı olur mu?
Hayır. JavaScript ile dinamik olarak eklenen öğeler, sayfa yenilendiğinde kaybolur. Kalıcı hale getirmek için verileri localStorage’da saklamanız gerekir.
appendChild()ileinsertBefore()arasındaki fark nedir?appendChild()→ Öğeyi listenin sonuna ekler.insertBefore()→ Öğeyi belirtilen öğeden önce ekler, yani istediğiniz konuma yerleştirebilirsiniz.
Kaynak w3schools
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!