jQuery添加DOM节点常用的5种方法

最新推荐文章于 2025-04-09 13:27:59 发布

不动声色的小蜗牛

最新推荐文章于 2025-04-09 13:27:59 发布

阅读量5.2k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107442738

版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

一、内部插入（前插入、后插入）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		
		<div id="content">
			<span>郑州</span>
		</div>
		<!--内部插入-->
		<script>
			//内部前插入
			$("#content").prepend("<i>河南省</i>");
			//内部后插入
			$("#content").append("<b>大学</b>")
		</script>
		
	</body>
</html>

二、外部插入（前插入、后插入）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		
		<!--外部插入-->
		<span id="bj">北京</span>
		<script>
			//外部前插入
			$("#bj").before("<i>北京市</i>");
			//外部后插入
			$("#bj").after("<b>大学</b>");
		</script>
			
	</body>
</html>

三、包裹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		
		<!--包裹-->
		<span class="sina">新浪</span>
		<script>
			//包裹
			$(".sina").wrap("<a href='http://www.sina.com.cn'></a>");
		</script>
		
	</body>
</html>