jQuery元素添加

最新推荐文章于 2024-07-18 11:48:33 发布

中国GZ

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量84

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/Gong_Zheng6/article/details/107445550

版权

通过jQuery我们可以实现对原有标签进行内部插入，外部插入，包裹的功能。

1.内部插入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div>
			<sapn>郑州</sapn>
		</div>
	</body>
</html>

如何在div标签内插入新标签？我们用jQuery实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div>
			<sapn>郑州</sapn>
		</div>
			//内部插入
			$("div").prepend("<b>美丽的</b>");//pre，预先，在div标签内部的开始出插入
			$("div").append("<b>！</b>");//在div标签末尾处插入
		</script>
	</body>
</html>

2.外部插入：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<i>2欢迎</i>
	</body>
</html>

要向i标签外插入新标签，用jQuery实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<i>2欢迎</i>
	<script>	
			//外部插入
			$("i").before("<i>1欢迎</i>");//在i标签前插入
			$("i").after("<i>光临</i>")//在i标签后插入，此时包括刚刚插入的i标签
	</script>
	</body>
</html>

3.包裹：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<img src="img/logo.png" />
		
	</body>
</html>

用新的标签将img标签包裹，用jQuery实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<img src="img/logo.png" />
		<script>
			//包裹
			$("img").wrap("<a href='http://www.sina.com.cn'></a>");
		</script>
	</body>
</html>

此时点击图片即被标签包裹。

中国GZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery元素添加

通过jQuery我们可以实现对原有标签进行内部插入，外部插入，包裹的功能。1.内部插入：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> </head&gt.
复制链接

扫一扫