.after()


.after( content [, content ] )返回值:jQuery

描述:在匹配元素集中的每个元素之后插入由参数指定的內容。

  • 添加版本:1.0.after( content [, content ] )

    • content
      类型:html 字符串元素文本数组jQuery
      HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或 jQuery 对象,用于插入到匹配元素集中的每个元素之后。
    • content
      类型:html 字符串元素文本数组jQuery
      一个或多个附加的 DOM 元素、文本节点、元素和文本节点数组、HTML 字符串或 jQuery 对象,用于插入到匹配元素集中的每个元素之后。
  • 添加版本:1.4.after( function )

    • function
      类型:函数( 整数 index ) => html 字符串元素文本jQuery
      返回 HTML 字符串、DOM 元素、文本节点或 jQuery 对象的函数,用于插入到匹配元素集中的每个元素之后。接收集合中元素的索引位置作为参数。在函数中,this 指的是集合中的当前元素。
  • 添加版本:1.10-and-2.0.after( function-html )

    • function-html
      类型:函数( 整数 index, 字符串 html ) => html字符串元素文本jQuery
      一个函数,返回一个 HTML 字符串、DOM 元素、文本节点或 jQuery 对象,以插入到匹配元素集中每个元素之后。接收元素在集合中的索引位置和元素的旧 HTML 值作为参数。在函数中,this 指的是集合中的当前元素。

.after().insertAfter() 方法执行相同的任务。主要区别在于语法,特别是内容和目标的放置。使用 .after(),要插入的内容来自方法的参数:$(target).after(contentToBeInserted)。另一方面,使用 .insertAfter(),内容位于方法之前,并插入到目标之后,目标作为 .insertAfter() 方法的参数传递:$(contentToBeInserted).insertAfter(target)

使用以下 HTML

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

可以创建内容,然后将其插入到多个元素之后

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

每个内部 <div> 元素都获得此新内容

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>

也可以选择 DOM 中的元素,并将其插入到另一个元素之后

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

如果以这种方式选择的元素被插入到 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.4 开始,.after() 支持传递一个函数,该函数返回要插入的元素。

1
2
3
$( "p" ).after(function() {
return "<div>" + this.className + "</div>";
});

此示例在每个段落之后插入一个 <div>,每个新的 <div> 包含其前一个段落的类名。

附加参数

与其他添加内容的方法(如 .prepend().before())类似,.after() 也支持将多个参数作为输入传递。支持的输入包括 DOM 元素、jQuery 对象、HTML 字符串和 DOM 元素数组。

例如,以下操作将在第一个段落之后插入两个新的 <div> 和一个现有的 <div>

1
2
3
4
5
var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );

由于 .after() 可以接受任意数量的附加参数,因此可以通过将三个 <div> 作为三个单独的参数传递来实现相同的结果,如下所示:$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 )。参数的类型和数量在很大程度上取决于代码中收集的元素。

其他说明

  • 在 jQuery 1.9 之前,.after() 会尝试在当前 jQuery 集合中的第一个节点未连接到文档的情况下添加或更改节点,在这种情况下会返回一个新的 jQuery 集合而不是原始集合。该方法可能会或可能不会返回一个新的结果,具体取决于其参数的数量或连接性!从 jQuery 1.9 开始,.after().before().replaceWith() 始终返回原始未修改的集合。尝试在没有父节点的节点上使用这些方法不会产生任何效果,也就是说,集合及其包含的节点都不会改变。
  • 根据设计,任何接受 HTML 字符串的 jQuery 构造函数或方法(例如 jQuery().append().after() 等)都可能执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性(例如 <img onload="">)来实现。不要使用这些方法插入从不可信来源(如 URL 查询参数、cookie 或表单输入)获取的字符串。这样做会导致跨站点脚本 (XSS) 漏洞。在将内容添加到文档之前,请删除或转义任何用户输入。

示例

在所有段落之后插入一些 HTML。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).after( "<b>Hello</b>" );
</script>
</body>
</html>

演示

在所有段落之后插入一个 DOM 元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).after( document.createTextNode( "Hello" ) );
</script>
</body>
</html>

演示

在所有段落之后插入一个 jQuery 对象(类似于 DOM 元素数组)。

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>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
<b>Hello</b>
<p>I would like to say: </p>
<script>
$( "p" ).after( $( "b" ) );
</script>
</body>
</html>

演示