JavaScript CreateElement Kullanımı – Girilen Metni Listeye Ekleme

Bu örnekte JavaScript ile CreateElement kullanarak bir listeye (ul) liste elemanı ekleyeceğiz (li).

Örneğimizde ekleyeceğimiz metni input text nesnesine gireceğiz ve Button tıklandığında girilen metni listeye ekleyeceğiz.

JavaScript Kodları:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <input type="text" id="txtEleman" placeholder="İsim Girin...">
    <button id="btn">EKLE</button>
    <ul id="liste"></ul>
    
    <script>
        var kutu=document.querySelector("#liste");
        var btnEkle=document.querySelector("#btn");
        var ad=document.querySelector("#txtEleman");
        
        btnEkle.onclick=function(){
            var eleman=document.createElement("li");
            eleman.innerText=ad.value;
            kutu.appendChild(eleman);   
        }
        
    </script>
    
</body>
</html>