title: Using jQuery to append a li makes it disappear immediately
body: <p><a href="http://adamginther.com/checkify/lists-overview.html" rel="nofollow">http://adamginther.com/checkify/lists-overview.html</a>?</p>
  
  <p><a href="http://jsfiddle.net/AGinther/Ysq4a/" rel="nofollow">http://jsfiddle.net/AGinther/Ysq4a/</a></p>
  
  <p>When input is submitted it should create a list item containing whatever was in the text field. It appears for a second on my website but on on the fiddle and doesn't append any text. I've tried creating a button tag and an a tag to fix this but I got no results.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="lists-overview"&gt;
          &lt;form&gt;
              &lt;input type="text" placeholder="Create a list"&gt;
              &lt;input type="submit" value="Add List" id="list-builder"&gt;
          &lt;/form&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>var createList = $('#lists-overview input[type="text"]').val();
  
  $('#list-builder').click(function() {
      $('#lists-overview ul li:last').after('&lt;li&gt;Test&lt;/li&gt;');
  
  });
  </code></pre>