title: add li element in ul using jquery
body: <p>I try make simple todo list. This is my html code:</p>
  
  <pre><code>&lt;form&gt;
     Task: &lt;input type="text" name="task" id="input"&gt;
     &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;br&gt;
  
  &lt;h2&gt;What you need to do&lt;/h2&gt;
  &lt;ul id="list"&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>Then I try use jquery to read from i input field and apppend to existing ul element. But when i try it in chrome my new added element show me for half of second and remove.
  Here is my js code:</p>
  
  <pre><code>  $(document).ready(function() {
      $('button').click(function() {
              var new_task = $('#input').val();
              $('#list').append('&lt;li&gt;'+new_task+'&lt;/li&gt;');
      });
    });
  </code></pre>