jQuery 学习-DOM篇（二）：jQuery 在 DOM 内部插入元素

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

店伙计

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

阅读量5.7k

点赞数

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

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

版权

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/112858323，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、向匹配的元素内部的最后插入元素

使用 append() 方法可以向匹配的元素内部插入元素，插入的元素是位于指定元素内部的最后：

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

如果匹配到的元素有多个，那么会向所有匹配到的元素内部插入元素：

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

二、将匹配的元素追加到另一个指定元素内部最后的位置

使用 appendTo() 方法可以将匹配的元素追加到另一个指定的元素集合中，插入的元素是位于指定元素内部的最后。其实与上面的方式一样，只不过是元素之间顺序变了：

<!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">测试<span class="myspan">子元素</span></div>').appendTo('.div1')
		})
	</script>
</head>
<body>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
</body>
</html>

三、向匹配的元素内部的首位插入元素

使用 prepend() 方法可以向匹配的元素内部的首位插入元素，如果该元素内部没有子元素，那么也一样可以直接插入（原生 JS 方法不可以）：

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

四、将匹配的元素追加到另一个指定元素内部的首位

使用 prependTo() 方法可以将匹配的元素追加到另一个指定元素内部的首位：

<!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">测试<span class="myspan">子元素</span></div>').prependTo('.div1');
		})
	</script>
</head>
<body>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
	<div class="div1">div测试</div>
</body>
</html>

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

店伙计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 学习-DOM篇（二）：jQuery 在 DOM 内部插入元素

一、向匹配的元素内部的最后插入元素使用 append() 方法可以向匹配的元素内部插入元素，插入的元素是位于指定元素内部的最后：<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $('document').read
复制链接

扫一扫