title: jQuery - How can i dynamically add a list item to an unordered list?
body: <p>Seems like a simple thing to do (although im still learning the ins and outs of jQuery).</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="fbsignup"&gt;
      &lt;div class="message messageerror"&gt; 
         &lt;strong&gt;There were errors with your registration:&lt;/strong&gt; 
            &lt;ul&gt;&lt;/ul&gt; 
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my (attempted) jQuery:</p>
  
  <pre><code>// Check Required Fields.
  $('#fbsignup input.required').each(function () {
     if ($(this).val().trim() == '') {
        $(this).next('em').html('*').show();
        $('#fbsignup .message ul').add('li').html('Fields marked with * are required.');
      }
  });
  </code></pre>
  
  <p>And this is what it is doing to the DOM:</p>
  
  <pre><code>&lt;div class="message messageerror"&gt; 
     &lt;strong&gt;There were errors with your registration:&lt;/strong&gt; 
        &lt;ul&gt;Fields marked with * are required.&lt;/ul&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>It's adding the text to the inner html. I want it to add a <code>&lt;li&gt;</code> element with the inner html of what i set - i thought this is how chaining works?</p>
  
  <p>This is the HTML i <strong>want</strong> to end up with:</p>
  
  <pre><code>&lt;div class="message messageerror"&gt; 
     &lt;strong&gt;There were errors with your registration:&lt;/strong&gt; 
        &lt;ul&gt;
           &lt;li&gt;Fields marked with * are required.&lt;/li&gt; 
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also tried this:</p>
  
  <pre><code>$('#fbsignup .message ul').add('&lt;li&gt;Fields marked with * are required.&lt;/li&gt;');
  </code></pre>
  
  <p>Which does absolutely nothing.</p>
  
  <p>What am i missing? Is the <code>.add</code> function not the right thing to use here?</p>