jQuery insertAfter()

简介

jQuery insertAfter() 方法用于将选择的元素插入到指定元素的后面。

语法

$(selector).insertAfter(target)

• selector：必需，要插入的元素的选择器或 HTML 代码。
• target：必需，指定目标元素的选择器或元素对象。

示例

在以下示例中，我们将向每个按钮后插入一条文本。

HTML 代码：

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>

jQuery 代码：

$(document).ready(function(){
  $("<p>文本1</p>").insertAfter("#btn1");
  $("<p>文本2</p>").insertAfter("#btn2");
  $("<p>文本3</p>").insertAfter("#btn3");
  $("<p>文本4</p>").insertAfter("#btn4");
});

效果：

按钮1 文本1 按钮2 文本2 按钮3 文本3 按钮4 文本4

注意事项

• insertAfter() 方法与 after() 方法非常相似，但参数的顺序不同。例如，$(selector).insertAfter(target) 等同于 $(target).after(selector)。
• 如果选择器匹配多个元素，则新元素将被插入到每个匹配元素的后面。
• 插入的元素在文档中以移动的形式出现，因此，如果需要保留原始的元素，请使用 clone() 方法。
• 如果要在目标元素的前面插入元素，请使用 insertBefore() 方法。