jQuery How do I move an element inside of another element

Hi I'm using grails navigation plugin and when it generates menus it put the sub navigation underneath the main menu, but i'm making my menu a vertical menu so i don't want the sub menu under the whole menu i want it under the active element.

Example: this is how it generate the menu and sub menu

<ul class="mainmenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>
<ul class="submenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

What i want is:

<ul class="mainmenu">
   <li>item1
     <ul class="submenu">
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
     </ul>
   </li>
   <li>item2</li>
   <li>item3</li>
</ul>

Since i don't know of a way to make grails nav plugin do this i guess i'll have to make jquery do it after it's ge开发者_运维问答nerated. Any ideas?

So the jquery i used from the answer below is:

<script type="text/javascript"> 
$(function() {
        alert("hi");
        $(".subnavigation").appendTo($(".navigation li:navigation_active"));
      });
</script>
....
<ul class="navigation" id="navigation_tabs">
    <li class="navigation_first">Item 1</li>
    <li class="navigation_active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="navigation_last">Item 5</li>
</ul> 
<ul class="subnavigation" id="subnavigation_tabs">
    <li class="subnavigation_first">Sub 1</li>
    <li>Sub 2</li>
    <li class="subnavigation_last">Sub 3</li>
</ul>

This seems like it should work but the menu still looks the same with all the sub items down below.

You can do this:

$(".submenu").appendTo($(".mainmenu li:first"));

Alternatively:

$(".mainmenu li:first").append($(".submenu"));

Or, to put it under all of them (hide by CSS):

$(".mainmenu li").append($(".submenu"));

Edit, for the updated question:

$(".subnavigation").appendTo($(".navigation li.navigation_active"));

Assuming with active you mean mouse hovering.

$("ul.mainmenu li").hover(function() {
    $(this).append($("ul.submenu"))
})