title: How to change order of html tag by using jquery
body: <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>