jQuery 学习-DOM篇（三）：jQuery 在 DOM 外部插入元素

最新推荐文章于 2022-07-29 11:36:13 发布

店伙计

最新推荐文章于 2022-07-29 11:36:13 发布

阅读量6.0k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/112906894

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/112906894，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、在匹配的元素集合后面插入元素

使用 after() 方法可以在匹配的元素集合后面插入元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('.div1').after($('<div class="mydiv" id="div2">测试</div>'))
         // $('.div1').after('<div class="mydiv" id="div2">测试</div>') 也可以直接写成这种形式
		})
	</script>
</head>
<body>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
</body>
</html>

使用 $(‘content’).insertAfter(‘DOM’) 也可以实现这个功能，只不过内容和目标的位置不同：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('<div class="mydiv" id="div2">测试</div>').insertAfter('.div1')
		})
	</script>
</head>
<body>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
</body>
</html>

二、在匹配元素集合的前面插入元素

使用 before() 方法可以在匹配的元素集合前面插入元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('.div1').before($('<div class="mydiv" id="div2">测试</div>'))
         // $('.div1').before('<div class="mydiv" id="div2">测试</div>') 也可以直接写成这种形式
		})
	</script>
</head>
<body>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
</body>
</html>

使用 $(‘content’).insertBefore(‘DOM’) 也可以实现这个功能，只不过内容和目标的位置不同：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			$('<div class="mydiv" id="div2">测试</div>').insertBefore('.div1');
		})
	</script>
</head>
<body>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
</body>
</html>