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

Question

例如,假设我有

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

我怎么插入

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

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

Answer 1

在jQuery中,有许多不同的选项可以在特定位置插入内容.在jQuery文档页面中对于在对象外部插入DOM进行了很好的描述.

要在现有元素之外插入内容(例如,不是子元素),但相对于该对象定位,您可以在此jQuery文档屏幕截图中显示四个选项:

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

如您所见,这使您可以在现有对象之前或之后插入内容(这将使其成为该对象的兄弟).

如果你希望它是该对象的孩子,那么你可以使用任何的6种jQuery方法,可以设置/更改内部内容包括.append(),.appendTo(),.html()等...

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>');