How to append <li> to another <ol> on click event using jquery?
<p>I have a dynamically generated list, Here is my HTML code</p>

<pre><code>&lt;ol class="pending"&gt;
  &lt;li&gt;&lt;a href="#" class="rendered"&gt;One&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="rendered"&gt;Two&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="rendered"&gt;Three&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="rendered"&gt;Four&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="rendered"&gt;Five&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="rendered"&gt;Six&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;ol class="patched"&gt;&lt;/ol&gt;
</code></pre>

<p>When any particular link is clicked, It should moved to different list.</p>

<pre><code>/*jslint browser: true*/ /*global  $*/ 
$(document).ready(function(){
    "use strict";
    $('.rendered').on('click', function(){
        $(this).toggleClass("rendered patched");
        //$(this).parent().append($(this).wrap("&lt;li&gt;&lt;/li&gt;"));
        $(this).appendTo("ol.patched");
    });
});
</code></pre>

<p>So far the only difficulty is in having the anchor value in the &lt;li&gt; added to the new list as an &lt;li&gt;.</p>

<p>The result I keep getting is </p>

<pre><code>&lt;ol class="pending"&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
&lt;/ol&gt; 
&lt;ol class="moved"&gt;
  &lt;a href="#" class="dld"&gt;One&lt;/a&gt;
  &lt;a href="#" class="dld"&gt;Two&lt;/a&gt;
  &lt;a href="#" class="dld"&gt;Three&lt;/a&gt;
  &lt;a href="#" class="dld"&gt;Four&lt;/a&gt;
  &lt;a href="#" class="dld"&gt;Five&lt;/a&gt;
  &lt;a href="#" class="dld"&gt;Six&lt;/a&gt;
&lt;/ol&gt;
</code></pre>

<p>I'm not sure what I am misunderstanding about <code>.append()</code> and <code>.appendTo()</code></p>