Buton ile tıklama yolu ile input üzerinden veri eklendikçe div içine (eğer yoksa) ol etiketini oluşturuyor. Bu ol etiketinin içine de gönderilen veriyi li etiketi ile sarmalayarak ekliyor.
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Javascript Dinamik Liste</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
Bir meyve adı giriniz:<br><input type="text" id="kutu" />
<button id="meyve-ekle" type="submit">Ekle</button>
<div id="liste"><p class="not">div bölgesi</p></div>
</div>
<script type="text/javascript" src="dosya.js"></script>
</body>
</html>
style.css
#liste {
background-color: #50babf;
width:30%;
padding:10px;
margin-top:20px;
border:1px solid #ddd;
}
#meyveler {
background-color:lightgreen;
}
dosya.js
document.getElementById("meyve-ekle").addEventListener(
'click',
function meyveEkle() {
var jkutu = document.getElementById("kutu");
if(document.getElementById("meyveler") === null) {
var olElement = document.createElement("ol");
olElement.id = "meyveler";
document.getElementById("liste").appendChild(olElement);
}
var liElement = document.createElement("li");
liElement.innerHTML = jkutu.value;
document.getElementById("meyveler").appendChild(liElement);
jkutu.value = "";
jkutu.focus();
}
);
dosya.js (Açıklamalı)
//--------------------------------------------------
//id değeri "meyve-ekle" olan element için olay
//atamasını addEventListener ile javascript
//dosyası üzerinden yaptık.
//--------------------------------------------------
document.getElementById("meyve-ekle").addEventListener(
//--------------------------------------------------
//Bu kod ilgili elementin click olayında çalışacak.
//--------------------------------------------------
'click',
//--------------------------------------------------
//click olayı olduğunda aşağıdaki fonksiyon çalışacak.
//--------------------------------------------------
function meyveEkle() {
//--------------------------------------------------
//kutu id değerine sahip input elementine değişken
//ataması yaptım. ol ve li için değerler bu inputtan
//gidecek.
//--------------------------------------------------
var jkutu = document.getElementById("kutu");
//--------------------------------------------------
//ol elementi sayfada var mı önce onu kontrol ediyoruz.
//Varsa ekliyor, yoksa ol içine li ekleme işine geçecek.
//--------------------------------------------------
if(document.getElementById("meyveler") === null) {
//--------------------------------------------------
//Yoksa ol elementi oluşturuluyor.
//--------------------------------------------------
var olElement = document.createElement("ol");
//--------------------------------------------------
//ol elementi için id attribute değerini ayarladım.
//--------------------------------------------------
olElement.id = "meyveler";
//--------------------------------------------------
//div içine element ekleme
//liste id değerine sahip elementi bul (bu bir div) ve
//olElement değişkenini ekle. Böylelikle div içine ol
//elementi eklemiş olduk.
//--------------------------------------------------
document.getElementById("liste").appendChild(olElement);
}
//--------------------------------------------------
//Zaten bir ol elementi daha önceden
//oluşturulmuşsa buradan devam edecek.
//Yani artık li elementlerini ekleyeceğiz.
//Öncelikle bir li elementi oluşturalım.
//--------------------------------------------------
var liElement = document.createElement("li");
//--------------------------------------------------
//li elementinin iç kısmına <li>BURASI OLUYOR.</li>
//input elementinden gelen veriyi aktarmak gerek.
//Bu işlemi gerçekleştiriyoruz.
//--------------------------------------------------
liElement.innerHTML = jkutu.value;
//--------------------------------------------------
//ol elementinin içine li ekleme işlemini yaptık.
//Dikkat edin oluşturduğumuz li elementi ol elementine ekleniyor.
//liste id değerine sahip div
//kodla oluşturduğumuz meyveler id değerine sahip ol [li buraya ekleniyor]
//--------------------------------------------------
document.getElementById("meyveler").appendChild(liElement);
//--------------------------------------------------
//input içindeki veriyi temizliyoruz.
//--------------------------------------------------
jkutu.value = "";
//--------------------------------------------------
//İmlecin tekrardan input elementinde
//aktif olmasını sağlıyoruz.
//--------------------------------------------------
jkutu.focus();
}
);
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir