Bu yazımızda JQuery ile sayfamızda oluşturduğumuz ul etiketleri içine JQuery ile li etiketi kullanarak liste elemanı ekleyecek bir örnek oluşturacağız. Örneğimizde liste elemanlarını eklemeden önce temizleme işlemini empty() metodunu kullanarak, li etiketi ile listeye eleman ekleme işlemini append metodu ile gerçekleştireceğiz. Ekleyeceğimiz liste elemanlarını oluşturacağımız diziyi kullanarak gerçekleştireceğiz. Dizi elemanlarının eklenmesini ise For Döngüsü içinde gerçekleştireceğiz.
Örneğimize ait html kodları aşağıdaki gibi olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> </head> <body> <input type="button" id="ekle" value="LİSTE EKLE"> <ul id="ders-liste"> </ul> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/liste.js"></script> </body> </html> |
liste.js dosyamızın içeriği ise aşağıdaki gibi olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // www.yazilimkodlama.com $(document).ready(function(){ var dersler=["C#","C++","ASP.NET","PHP","HTML","CSS","JAVASCRIPT","JQUERY"]; $("#ekle").on("click",function(){ $("#ders-liste").empty(); //Listeyi boşalt for(var i=0;i<dersler.length;i++) { $("#ders-liste"). append($("<li>"+dersler[i]+"</li>")) // Listeye ekleme } }) }); |
Sayfamızı görüntülediğimizde Liste Ekle butonuna bastığımızda ekran çıktısı aşağıdaki gibi olacaktır.