วิธีเพิ่มรายการใหม่เข้าไปใน <ul> ด้วย jQuery

เพื่อเพิ่มรายการใหม่เข้าไปในอีลิเมนต์ ul ให้ใช้เมธอด append() ของ jQuery

ตั้งค่า input type text เริ่มต้น

Value: <input type="text" name="task" id="input">

ตอนนี้เมื่อคลิกปุ่ม ให้เพิ่มรายการใหม่โดยใช้เมธอด val() และ append() ใน jQuery:

$('button').click(function() { 
    var mylist = $('#input').val(); 
    $('#list').append('
'+mylist+'
'); 
    return false; 
});

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้วิธีเพิ่มรายการใหม่ด้วย jQuery:

ตัวอย่าง

<!DOCTYPE html> <html> <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
        $(document).ready(function(){ 
            $('button').click(function() { 
                var mylist = $('#input').val(); 
                $('#list').append('
'+mylist+'
'); 
                return false; 
            }); 
        }); 
    </script> 
</head> <body> 
    <form> 
        Value: <input type="text" name="task" id="input"> 
        <button>Submit</button> 
        <br> 
        <p>Add a value above and click Submit to add a new list.</p> 
        <ul id="list"> 
        </ul> 
    </form> 
</body> </html>