在jQuery中，我如何添加一些兄弟姐妹的东西？

Question

例如假设我有

<div class="sibling1"></div>
<div class="sibling3"></div>

如何插入

<div class="sibling2"></div>

以上之间？我试过prepend但是这会让孩子不是兄弟姐妹

Answer 1

在jQuery中，有许多不同的选项可用于在特定位置插入内容。在jQuery documentation page for DOM insertion outside an object中已经很好地描述了它。

要在现有元素之外插入内容（例如，不是子元素），但相对于该对象定位，您可以在此jQuery doc屏幕截图中显示四个选项：

前两个和后两个之间的区别仅在于哪个参数。对于前两个，插入的位置在jQuery对象中，内容在函数参数中。对于后两个，要插入的内容位于jQuery对象中，目标位于函数参数中。由于多个函数调用的链接，有时一个或另一个更方便。

正如您所看到的，这允许您在现有对象之前或之后插入内容（这将使其成为该对象的兄弟）。

如果您希望它是该对象的子级，那么您可以使用任何可以设置/更改内部内容的six jQuery methods，包括.append()，.appendTo()，{{ 1}}等...

Answer 2

使用after，如下所示：

$('.sibling1').after('<div class="sibling2"></div>');

您也可以使用ID而不是类，这对我来说更合适，如下所示：

<div id="sibling1" class="sibling"></div>
<div id="sibling3" class="sibling"></div>

然后使用：

$('#sibling1').after('<div id="sibling2" class="sibling"></div>');

Answer 3

http://api.jquery.com/insertBefore/：

$('<div class="sibling2"></div>').insertBefore($('.sibling3'));