jQuery - append new UL content to existing UL on click
<p>Im using the plugin detailed here:</p>

<p><a href="http://www.thatagency.com/design-studio-blog/2009/01/refreshing-an-element-at-a-set-time-interval-using-jquery-and-a-sprinkle-of-ajax/" rel="nofollow">http://www.thatagency.com/design-studio-blog/2009/01/refreshing-an-element-at-a-set-time-interval-using-jquery-and-a-sprinkle-of-ajax/</a></p>

<p>Here is my jQuery:</p>

<pre><code>$(document).ready(function(){
   var j = jQuery.noConflict();
    j(document).ready(function()
    {
        j(".refreshMe").everyTime(5000,function(i){
            j.ajax({
              url: "test.php?latest="+className+"",
              cache: false,
              success: function(html){
                j(".refreshMe").html(html);
              }
            })
        })
    });
});
</code></pre>

<p>*Note className is a calculated value which is a UNIX date, this date is set on the first element on the page as the date and time it was fetched from the database. This is used to work out when new content arrives in the database. Its not really relevant to the problem i have but thought i'd fill you in anyway.</p>

<p>This is allowing me to request a php file to get new content from a database and add it to the page without the need for refresh.</p>

<p>My page looks like this:</p>

<pre><code>&lt;ul class="entries"&gt;
 &lt;li&gt;Item1&lt;/li&gt;
 &lt;li&gt;Item2&lt;/li&gt;
 &lt;li&gt;Item3&lt;/li&gt;
 &lt;li&gt;Item4&lt;/li&gt;
 &lt;li&gt;Item5&lt;/li&gt;
 &lt;li&gt;Item6&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When I fetch the new content I add the HTML to the page in a new DIV, but the structure of the new content is the lase to the list above.</p>

<p>So when new content is found the page looks like this:</p>

<pre><code>&lt;ul&gt;
 &lt;li&gt;Item1&lt;/li&gt;
 &lt;li&gt;Item2&lt;/li&gt;
 &lt;li&gt;Item3&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="entries"&gt;
 &lt;li&gt;Item1&lt;/li&gt;
 &lt;li&gt;Item2&lt;/li&gt;
 &lt;li&gt;Item3&lt;/li&gt;
 &lt;li&gt;Item4&lt;/li&gt;
 &lt;li&gt;Item5&lt;/li&gt;
 &lt;li&gt;Item6&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I've wrapped the latest results in a hidden DIV.</p>

<p>E.g.</p>

<pre><code>&lt;div class="latest" style="display: none;"&gt;
    &lt;ul&gt;
     &lt;li&gt;Item1&lt;/li&gt;
     &lt;li&gt;Item2&lt;/li&gt;
     &lt;li&gt;Item3&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>What I would like to do is alter my jQuery to <code>append</code> the hidden content to the existing list when <code>clicking</code> a link or button set on the page. </p>

<p>Similar to the way Facebook lets you know there are new updates to been seen, and lets you click a link to view them.</p>
