Javascript kullanarak dizileri HTML etiketi olan UL ve Lİ içerisine yazarak listeleme yapacağız. Olduça basit bir mantıkla bu işlemi gerçekleştireceğiz. Temel olarak createElement() fonksiyonunu ve appendChild() fonksiyonunu kullanarak bu yapının oluşturulmasını sağlayacağız.
Neler Kullanacağız?
- createElement() : listeleme yapısını oluşturacak en önemli fonksiyondur. Bu fonksiyon ile HTML etiketi(ul ve li) oluşturacağız.
- createTextNode() : Yazı alanı oluşturmak ve dizideki(array) verileri Lİ etiketinin içerisine yazdıracağız.
- appendChild() : Seçilen üst elemente ait alt elementin sonuna ekleme yapmak için kullanacağız.
Yukarıda yer alan fonksiyonlar dışında for() döngüsünü ve içeriğin yazılacağı div etiketini seçmek için getElementById() fonksiyonunu kullanacağız. Bunları dışında ufak tefek şeylerde eklenecek tabi.
İlk olarak hazırladığımız sonucun ekrana yazdırılacağı HTML etiketini oluşturalım. Ardından da javascript kodlarını yazarak işlemi gerçekleştirelim.
<div id="sonuc"> </div>
Yukarıda yer alan HTML etiketine javascritten dönen sonuç yazdırılacaktır. Şimdi de bu HTML etiketinin altına SCRIPT etiketlerini açık javascript kodlarını yazalım.
<script>
function ul_li(dizi){
// UL Etiketini oluşturduk
var ul = document.createElement("ul");
// dizide yer alan veri kadar döngüyü tekrar ediyoruz.
for(var i = 0; i < dizi.length; i++ ){
// Lİ Etiketini oluşturduk.
var li = document.createElement("li");
// Lİ Etiketinin içerisine döngüden elemanı ekledik.
li.appendChild( document.createTextNode(dizi[i]) );
// Lİ Etiketini UL Etiketine ekledik.
ul.appendChild(li);
}
return ul;
}
// Dizi değişkeni oluşturuyoruz.
var degerler = [ "ibahim Çevrük", "Her Yönüyle PHP", "PHP Dersleri", "Javascript Dersleri" ];
// Fonksiyonu kullanıyoruz.
document.getElementById('sonuc').appendChild(ul_li(degerler));
</script>
Yukarıda yer alan kodlarda degeler isimli değişkenlerdeki verileri for döngüsü ile LI etiketlerine eklemiş oluyoruz. Bu kodları da yazdıktan sonra aşağıdaki gibi bir sonuç elde edilecektir.
- ibahim Çevrük
- Her Yönüyle PHP
- PHP Dersleri
- Javascript Dersleri
Farklı HTML etiketleri oluşturup javascript ile elementler oluşturup işleyebilirsiniz.
