【jQuery】after()与insertAfter()

最新推荐文章于 2023-01-09 01:38:14 发布

景谦Nice

最新推荐文章于 2023-01-09 01:38:14 发布

阅读量208

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_43705275/article/details/103298907

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

after()：向每个匹配的元素后插入内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>after()</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span style="cursor: pointer;" onclick="test()">点这里触发事件</span>
		<p id="one">床前明月光</p>
		<script type="text/javascript">
			function test(){
				$("#one").after("<p>疑是地上霜</p>");
			}
		</script>
	</body>
</html>

点击“点这里触发事件”后结果如下：
在这里插入图片描述

insertAfter()：将匹配的元素插入到另一个、指定的元素后面

例1，调用者为id选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>insertAfter()</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span style="cursor: pointer;" onclick="test()">点这里触发事件</span>
		<p id="two">疑是地上霜</p>
		<p id="one">床前明月光</p>
		<script type="text/javascript">
			function test(){
				$("#two").insertAfter("#one");
			}
		</script>
	</body>
</html>

刷新后：

点击“点这里触发事件”后显示结果如下：
在这里插入图片描述

例2，调用者为一个标签：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>insertAfter()</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span style="cursor: pointer;" onclick="test()">点这里触发事件</span>
		<p id="one">床前明月光</p>
		<script type="text/javascript">
			function test(){
				$("<p>疑是地上霜</p>").insertAfter("#one");
			}
		</script>
	</body>
</html>

刷新后：

点击“点这里触发事件”后，结果如下：
在这里插入图片描述

景谦Nice

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】after()与insertAfter()

after()：向每个匹配的元素后插入内容<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>after()</title> <script src="js/jquery-3.3.1.js"></script> &lt...
复制链接

扫一扫