.insertAfter()

类别：文档处理 > DOM外部插入

.insertAfter( target )返回类型：jQuery

描述：把匹配的元素集合中的每个元素插入到目标后面。

.after()方法和.insertAfter()方法实施了同样的任务。主要区别是内容和目标的位置，是语法特有的。利用.after()，在方法前面的选择器表达式是容器，用来插入内容。另一方面，用.insertAfter()，内容在方法前面，既可以是一个选择器表达式，也可以是一个快速创建的标签，它被插入到目标容器后面。

请考虑以下HTML：

1
2
3
4
5
 
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

我们可以创建内容并一次性把它插入到若干元素后面：

1
 
$( "<p>Test</p>" ).insertAfter( ".inner" );

每个<div.inner>元素取得了最新内容：

1
2
3
4
5
6
7
 
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

我们还可以在网页上选择一个元素，把它插入到另一个元素后面：

1
 
$( "h2" ).insertAfter( $( ".container" ) );

如果用这种方法选中的元素被插入到DOM中别的位置，则它将被移到目标后面（而不是克隆），并返回构成被插入的元素的新集合：

1
2
3
4
5
 
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

然而，如果有不止一个目标元素，将会针对第一个之后的第个目标创建被插入元素的克隆副本，然后返回新集合（原来的元素加上克隆的元素）。

在jQuery 1.9以前，追加到单个元素的情况并不创建一个新集合，而是返回原始集合，这使它难以可靠地使用.end()方法，如果它是与一个数量未知的元素配合使用的话。

补充说明：

  • 根据设计，任何接受HTML字符串的jQuery构造函数或方法——jQuery()、.append()、.after()等等——都可以潜在地执行代码。通过脚本标签注入或者使用执行代码的HTML特性（例如，<img onload="">）也能发生这种情况。不要使用这些方法来插入来自不可信任的来源的字符串，譬如URL查询参数、cookies，或表单输入。如果那样做的话会导致跨域脚本（XSS）漏洞。在把内容添加到文档之前，请先删除或转义任何用户输入。
  • jQuery并没有正式支持SVG。在SVG文档中使用jQuery方法，除非有针对此那些方法的明确说明，否则可能导致不期待的行为。自从jQuery 3.0以来，支持SVG的方法的例子是addClass和removeClass。

示例：

在一个带有id="foo"的元素后面插入所有的段落。与$("#foo").after("p")相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertAfter demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p> is what I said... </p>
<div id="foo">FOO!</div>
 
<script>
$( "p" ).insertAfter( "#foo" );
</script>
 
</body>
</html>

演示：