jQuery clone li and its children
<p>I'm trying to clone one <code>li</code> and its children and then append it to another <code>div</code>. My problem is I can only seem to get the anchor tags in the <code>li</code> tags and not the actual <code>li</code> structure. I'm using <code>contains</code> to find the correct <code>li</code> to clone. I know first is the wrong function to use but what I need to do is get the previous <code>li</code> and its children where <code>currentCategory</code> is found. I created JSfiddle to show it clearer <a href="http://jsfiddle.net/2EE2J/" rel="nofollow">http://jsfiddle.net/2EE2J/</a></p>

<pre><code>$(document).ready(function () {
    var currentCategory = $(".Breadcrumb ul li:last").text();
    $(".SideCategoryListFlyout li a:contains('" + currentCategory + "')").first().clone().appendTo("#test");
});
</code></pre>

<p>I am getting this:</p>

<pre><code>&lt;a href="link"&gt;link&lt;/a&gt;
&lt;a href="link"&gt;link&lt;/a&gt;
&lt;a href="link"&gt;link&lt;/a&gt;
</code></pre>

<p>I want this:</p>

<pre><code>&lt;ul&gt;
    &lt;li class=""&gt;&lt;a class="sf-with-ul" href=""&gt;Belts&lt;span class="sf-sub-indicator"&gt; »&lt;/span&gt;&lt;/a&gt;&lt;ul style="visibility: hidden; display: none;"&gt;
    &lt;li&gt;&lt;a href=""&gt;Casual Belts&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Jean Belts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
