jquery - 在 jQuery 中，我怎样才能添加一些东西作为兄弟姐妹？

Question

例如假设我有

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

我该如何插入

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

以上之间？我已经尝试过，但这会使孩子不是兄弟姐妹

Answer 1

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

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

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

如您所见，这使您可以在现有对象之前或之后插入内容（这将使其成为该对象的兄弟）。

如果您希望它成为该对象的子对象，那么您可以使用可以设置/更改内部内容的六种 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>');

Answer 3

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

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