Javascript HTML Liste (ul, li) Fonksiyonu

Yazılım geliştirici olarak farklı projelerde ve farklı görevlerde çalışabiliyorum. Her yeni projede kullandığım faydalı araçları ve kodları da yakuter.com’da paylaşıyorum. İşte bu yazıda da frontend görevini üstlendiğim bir projede kullandığım javascript fonksiyonunu paylaşmak istiyorum. Bu fonksiyon sayesinde dizi (array) halindeki javascript verisini HTML list (ul, li) şeklinde çıktı olarak alabiliyorsunuz.

Javascript Diziyi HTML Liste (ul, li) Şeklinde Yazdırma

Javascript Fonksiyonu

function makeUL(array) {
     
     var list = document.createElement('ul');

     for(var i = 0; i < array.length; i++) {
         var item = document.createElement('li');
         item.appendChild(document.createTextNode(array[i]));
         list.appendChild(item);
     }

     return list;
 }

 var a = [ "Ford", "BMW", "Fiat" ];

 document.getElementById('sonuc').appendChild(makeUL(a));

HTML Çıktısı

     

        
Ford
        
BMW
        
Fiat