I'm having trouble entering text to add <li> to an empty <ul> in my html

Question

My ultimate goal is for any input that the user represents to be added to a blank page ulpage. When the item is added, I want the text input value to be returned in an empty text field. Trying to create a to-do list to a large extent. I don't get errors on my console, so I'm not sure what I'm doing wrong! Here is my HTML:

<div class="list">

    <h1>To Do List</h1>
<form>
<label> Things to Do:
<input id="item" type="text" name="item" placeholder="Items" />
<input id="submit" type="submit" value="Add to List"/></label>
</form>
<ul>
</ul>
<button id="clear">Clear List</button>
<button id="completed">Clear Completed Items</button>
</div>

Here is my javascript:

    $(document).ready(function(){
//this appends the input inside on an li inside the ul we created in the html
$("form").submit(function(event){
  e.preventDefault();
$("ul").append("<li>" + $("#item")[0].value + "</li>");
$("#item") [0].value="";

});

When I try to do this, I notice that the value is stored in the URL, but not added to ul.

Answer 1

, event , e. . e event :

$(document).ready(function() {
  //this appends the input inside on an li inside the ul we created in the html
  $("form").submit(function(e) {
    e.preventDefault();
    $("ul").append("<li>" + $("#item")[0].value + "</li>");
    $("#item")[0].value = "";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="list">
  <h1>To Do List</h1>
  <form>
    <label> Things to Do:
<input id="item" type="text" name="item" placeholder="Items" />
<input id="submit" type="submit" value="Add to List"/></label>
  </form>
  <ul>
  </ul>
  <button id="clear">Clear List</button>
  <button id="completed">Clear Completed Items</button>
</div>

, !:)