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: <input type="text" name="task" id="input">
  <button>Submit</button>
  <br>

 <h2>What you need to do</h2>
 <ul id="list">

 </ul>
</form>

JS

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

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

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>');
  return false;   // This is new line of code
});