How to change order of html tag by using jquery
<p>I'd like to do bellow step by using jquery.
Does anyone know great solution?</p>

<ol>
<li><p>Get DOM object of "ul" element.</p>

<pre><code>&lt;ul id="rows"&gt;
    &lt;li class="row1"&gt;
        &lt;a class="row1-1" href="/kensaku2/Page1" title="page1"&gt;
        2011/11/16&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="row2"&gt;
        &lt;a class="row1-2" href="/kensaku2/Page2" title="page2"&gt;
        2011/11/15&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="row3"&gt;
        &lt;a class="row1-3" href="/kensaku2/Page3" title="page3"&gt;
        2011/12/21&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="row4"&gt;
        &lt;a class="row1-4" href="/kensaku2/Page4" title="page4"&gt;
        2011/12/05&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre></li>
<li><p>Find "li" element that has "a" element's content equals '2011/12/21'. (This is "row3" li element.)</p></li>
<li><p>Move the "li" element to the head. (also see bellow code.)</p>

<pre><code>&lt;ul id="rows"&gt;
    &lt;li class="row3"&gt;
        &lt;a class="row1-3" href="/kensaku2/Page3" title="page3"&gt;
        2011/12/21&lt;/a&gt;
    &lt;/li&gt;

    &lt;li class="row1"&gt;
        &lt;a class="row1-1" href="/kensaku2/Page1" title="page1"&gt;
        2011/11/16&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="row2"&gt;
        &lt;a class="row1-2" href="/kensaku2/Page2" title="page2"&gt;
        2011/11/15&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="row4"&gt;
        &lt;a class="row1-4" href="/kensaku2/Page4" title="page4"&gt;
        2011/12/05&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre></li>
</ol>

<p>I already know how to get DOM object of "ul" element like this.</p>

<pre><code>    $("#rows").get(0)
</code></pre>

<p>But I don't know step 2 and 3.
So, I'd like to ask experts.</p>
