如何使用jQuery在一个div中添加其他的div？

Question

我正在尝试使用jQuery的add()方法将一个div插入到另一个div中，但是它没有起作用。

<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>

实际上，panel1和panel2在一个div中，而panel3在另一个div中。我想将panel3从它的div中移除，并将其放置在它们的div中的panel1和panel2之间。

- Neal

Answer 1

你可以使用.insertAfter()来实现：

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

按照您的要求，这样做就是将panel3放置在panel1和panel2之间。

- Nick Craver

Answer 2

使用appendTo将div添加到现有的div中...但是如果您想在两个div之间插入，请使用after()和before()

给主div一个ID，比如说MainDiv，然后使用urdiv.appendTo("MainDiv");

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

- ACP

---

这将把文本“#panel3”插入到两个div之间....before()不接受选择器，只接受文本或html :) - Nick Craver

@Nick，我认为insertafter()在这种情况下是最合适的选择，正如问题发布者所提到的那样。 - ACP

Answer 3

你可以使用 after()

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

- rahul