.insertAfter()

.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的方法的例子是addClassremoveClass

示例:

在一个带有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>

演示: