Appending a to-do list : <p>I am trying to make a "to do list" app. I am trying to append what I put in the input into a list under "To Do" with a "Done" button. Here is what I have so far:</p>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;link rel="stylesheet" text="text/css" href="doneit.css"&gt;
        &lt;head&gt;
            &lt;script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
            &lt;/script&gt;
        &lt;/head&gt;
  &lt;body&gt;
        &lt;div id="container"&gt;
             &lt;input type="text" id="task" placeholder="New Task"/&gt;
                &lt;button id="enter"&gt;Enter&lt;/button&gt;
                    &lt;div class="todo"&gt;
                        &lt;ul id="chores"&gt;&lt;h2&gt;To Do:&lt;/h2&gt;&lt;/ul&gt;
                    &lt;/div&gt;
                &lt;button id="reset"&gt;New List&lt;/button&gt;
        &lt;/div&gt;

    &lt;script type="text/javascript" src="doneit.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and the Javascript:</p>

<pre><code>$(document).ready(
 function() {

var chores=[];

$("#enter").click(function () {
    var task = $("#task").val();
    var $btn = $('&lt;button /&gt;', {
        id: "check",
        type: "button",
        text: "Done",
        value: task,
        click: function(){
            var did = this.value;
            $("#todo").append('&lt;p&gt;'+  check+'&lt;/p&gt;');
            chores.push(check); 
        }
    });


$(".reset").click(function() {
    location.reload();

});
</code></pre>
