title: Append input value to a div
body: <p>can someone show me how to take an input value and append it to a div once the user clicks on an Add link?</p>
  
  <p>This is the best I could do.
  HTML:</p>
  
  <pre><code>&lt;div id="customUtility-container"&gt;&lt;/div&gt;
  &lt;a href="#" id="addUtility"&gt;Add&lt;/a&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
                  var addDiv = $('#customUtility-container');
                  var i = $('#customUtility-container').size() + 1;
  
                  $('#addUtility').live('click', function() {
                          $('#customUtility').val().appendTo(addDiv);
                          $('&lt;p&gt;&lt;label for="customUtility-container"&gt;&lt;input type="text" id="customUtility" size="20" name="customUtility_' + i +'" value="" placeholder="" /&gt;&lt;/label&gt; &lt;a href="#" id="removeUtility"&gt;Remove&lt;/a&gt;&lt;/p&gt;').appendTo(addDiv);
                          i++;
                          return false;
                  });
  
                  $('#removeUtility').live('click', function() {
                          if( i &gt; 2 ) {
                                  $(this).parents('p').remove();
                                  i--;
                          }
                          return false;
                  });
  </code></pre>
  
  <p>This creates another input field however; I just want to have one input box, have the user click Add, then it takes that value, puts it into the list, and clears the input box so the user can add something else again.  </p>