Add Li Element In Ul Using Jquery

I try make simple todo list. This is my html code:

Task:

<

Solution 1:

A button inside a form has a default type of submit, and will submit the form, you need to prevent that or set a different type on the button :

$(document).ready(function() {
    $('button').on('click', function(e) {
        e.preventDefault();
        var new_task = $('#input').val();
        $('#list').append('<li>'+new_task+'</li>');
    });
});

Solution 2:

Try this

HTML

<form>
  Task: <inputtype="text"name="task"id="input"><button>Submit</button><br><h2>What you need to do</h2><ulid="list"></ul></form>

JS

$(document).ready(function() {
 $('button').click(function() {

  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  returnfalse;
 });
});

Demo

Solution 3:

You must return false; at the end of your function:

$('button').click(function() {
  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  returnfalse;   // This is new line of code
});