title: Append with input value with <li> tag
body: <p>Thanks in advance.
  I am trying to append a list using the input value. I can append a list using predefined string, and I can append using input value to non list item. But I'm having trouble combining these, it seems to add extra list items.
  This is the code I'm using:</p>
  
  <pre><code>    &lt;ol&gt;
    &lt;li&gt;List item 1&lt;/li&gt;
    &lt;li&gt;List item 2&lt;/li&gt;
    &lt;li&gt;List item 3&lt;/li&gt;
  &lt;/ol&gt;
  &lt;form&gt;
      &lt;div&gt;&lt;textarea class="example-default-value" id="example-textarea" style="width: 400px; height: 50px;"&gt;Type some text in here to be appended&lt;/textarea&gt;&lt;/div&gt;
      &lt;div&gt;&lt;input type="button" value="Append" onclick="example_append()" /&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;script language="javascript"&gt;
  $('.example-default-value').each(function() {
      var default_value = this.value;
      $(this).focus(function() {
          if(this.value == default_value) {
              this.value = '';
          }
      });
      $(this).blur(function() {
          if(this.value == '') {
              this.value = default_value;
          }
      });
  });
  function example_append() {
      $('ol').append("&lt;li&gt;"+($('#example-textarea').val())+"&lt;li&gt;");
  }
  &lt;/script&gt;
  </code></pre>