jQuery API .after()

最新推荐文章于 2025-05-05 13:58:30 发布

依然那么楞

最新推荐文章于 2025-05-05 13:58:30 发布

阅读量911

点赞数

CC 4.0 BY-SA版权

文章标签： jquery api after

本文链接：https://blog.youkuaiyun.com/ling811/article/details/17675809

本文介绍了 jQuery 中的 .after() 方法，该方法用于在匹配元素之后插入指定内容。文章通过三个实例展示了如何使用 HTML 字符串、DOM 元素及 jQuery 对象进行插入操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.after()

描述:插入内容,指定的参数,在每个元素在匹配的元素集合。

.after(content[,content])

content

类型:htmlString或Element或Array或jQuery

HTML字符串,DOM元素,数组的元素,或jQuery对象插入后每个元素在匹配的元素集合。

content

类型: String, Element, Array, jQuery

添加的一个或多个DOM元素，元素的数组，HTML字符串，或jQuery对象，插在每个匹配元素的后面

.after(function(index))

function(index)

类型: Function()

一个函数,返回一个HTML字符串,DOM元素,或jQuery对象插入后每个元素在匹配的元素集合。接收元素的索引位置的设置作为参数。在函数内,这是指当前元素的集合。

.after()和.insertAfter()实现同样的功能。主要的不同是语法——特别是内容和目标的位置。对于 .after(), 选择表达式在函数的前面，参数是将要插入的内容。对于.insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面。

例子:

Example: 在所有的段落后插入一些HTML。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p{ background:#0FF;}
</style>
<script src="jquery-1.10.2.js"></script>
</head>

<body>
<p>这个是测试：</p>
<script>
	$("p").after("<b>被after加入的段落句子！</b>");
</script>
</body>
</html>

效果图：

Example: 在所有的段落后插入一个DOM元素。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    p{ background:#0FF;}
    </style>
    <script src="jquery-1.10.2.js"></script>
    </head>
    
    <body>
    <p>这个是测试：</p>
    <script>
    	$("p").after(document.createTextNode("被after加入的document.createTextNode()文本！"));
    </script>
    </body>
    </html>

效果图：

Example: 在所有段落后插入一个jQuery对象。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    p{ background:#0FF;}
    </style>
    <script src="jquery-1.10.2.js"></script>
    </head>
    
    <body>
    <p>这个是测试：</p>
    <b>调用的b标签</b>
    <script>
       // $("p").after("<b>被after加入的段落句子！</b>");
    	//$("p").after(document.createTextNode("被after加入的document.createTextNode()文本！"));
		$("p").after($("b"));
    </script>
    </body>
    </html>

效果图：