How to add divs inside a div using jquery

Question

Hi,
I am trying to insert a div inside another div using add() of jquery but it is not working

<div class="column" id="col1">
    <div class="portlet" id="panel1">
        <div class="portlet-header">1.Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet" id="panel2">
        <div class="portlet-header">2.News</div>

        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

<div class="column" id="col2">
    <div class="portlet" id="panel3">
        <div class="portlet-header">3.Shopping</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

Actually panel1 and panel2 are inside a div, and panel3 is inside another div.I want to remove panel3 from its div and place it between panel1 and panel2 in their div.

Answer 1

Use appendTo which will add divs to an existing div... But if you want to insert in between two divs use after() and before()

Give the main div an Id say MainDiv and use urdiv.appendTo("MainDiv");

$("#panel2").before("#panel3");

Answer 2

You can use after()

$("#panel1").after($("#panel3"));

Answer 3

You can do it like this using .insertAfter():

$("#panel3").insertAfter("#panel1");​​​​​​​​​​​​​​

This does as your question states, takes panel3 and places it between panel1 and panel2.