Javascript Add LI To UL - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Javascript Add LI To UL, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel <li>, Artikel <ul>, Artikel add <li> to <ul> using javascript, Artikel Add A New LI To UL From Input Text Using Javascript, Artikel Add LI To UL, Artikel Input Text, Artikel javascript, Artikel Javascript Input Text, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Javascript Add LI To UL
link : Javascript Add LI To UL

Baca juga


Javascript Add LI To UL

How To Add A New LI To UL From Input Text Using Javascript  

add a new li into ul using javascript


In This Javascript Tutorial we will See How To Insert A New <li> Element Into An Unordered List <ul> With Value From Text Input On Button Click using JS And Netbeans Editor .


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript: add LI to UL</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <input type="text" id="txtVal">
        <button onclick="addLi()">Add</button>
        
        <ul id="list">
            <li>1</li>
            <li>22</li>
            <li>50</li>
        </ul>
        
        <script>
            
            function addLi()
            {

                var txtVal = document.getElementById('txtVal').value,
                    listNode = document.getElementById('list'),
                    liNode = document.createElement("LI"),
                    txtNode = document.createTextNode(txtVal);
            
                 liNode.appendChild(txtNode);
                 listNode.appendChild(liNode);
            
            }
            
        </script>
       
    </body>
</html>


OUTPUT:



add li to ul from input text





Demikianlah Artikel Javascript Add LI To UL

Sekianlah artikel Javascript Add LI To UL kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Javascript Add LI To UL dengan alamat link https://dev-create.blogspot.com/2017/10/javascript-add-li-to-ul.html