title: Create and add a <li> element to an ordered list using javascript/jquery
body: <p>I'm trying to create a To Do list, and when the user enters a new task, and clicks the button, the javascript should create a li element containing a span that holds the user's entry, then add that li element to the ol in my HTML.
  My HTML looks like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;To Do:&lt;/h1&gt;
      &lt;section&gt;
  
          &lt;input type="text" id="add_todo"&gt;
          &lt;span id="add_task_error"&gt;&amp;nbsp;&lt;/span&gt;
          &lt;input type="button" id="add_task" value="Add task"&gt;
  
          &lt;div id="empty_message" class="open"&gt;
              &lt;h3&gt;You have no tasks left to accomplish!&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div id="tasklist"&gt;
              &lt;ol class="list"&gt;
  
              &lt;/ol&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the function that is not working:</p>
  
  <pre><code>        var newSpan = $('&lt;span&gt;input&lt;/span&gt;').addClass("task");
          //wrap it in a &lt;li&gt; element
          newSpan = (".task").wrap("&lt;li&gt;&lt;/li&gt;");
          $(".list").append(newSpan);
  </code></pre>
  
  <p>I also tried it this way:</p>
  
  <pre><code>         var new_task = $('&lt;li&gt;*&lt;/li&gt;').addClass('task');
           new_task.appendTo('ol.list');
           new_task.setAttribute('id', 'new_task');
           $("#new_task").text(input);
  </code></pre>
  
  <p>Both ways did not work- when I clicked the Add Task button (which is not the problem- I tested it), nothing happened on the screen...</p>
  
  <p>What am I doing wrong???</p>