jQuery入门之添加元素

最新推荐文章于 2021-08-29 07:29:07 发布

这个名字真难起

最新推荐文章于 2021-08-29 07:29:07 发布

阅读量180

点赞数

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

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107445525

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加DOM节点

内部插入
①append(content) ：向每个匹配元素内部的末尾处插入内容；
②appendTo(content) ：将每个匹配的元素追加到指定的元素中的内部的末尾；
③prepend(content) ：向每个匹配元素内部的开始处插入内容；
④prependTo(content)：将每个匹配的元素插入到指定的元素内部的开始处；

<!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 id="content">
			<span>郑州</span>
		</div>
		
		<!--内部插入-->
		<script>
			//插入到id为content标签的内部
			$("#content").prepend("<i>河南省</i>");//前插入
			$("#content").append("<b>大学</b>");//后插入
		</script>
	</body>
</html>

在这里插入图片描述

外部插入
①after(content) ：向每个匹配的元素后插入内容；
②before(content) ：向每个匹配的元素前插入内容；
③insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面；
④insertBefore(content)：将匹配的元素插入到另一个、指定的元素前面；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<b>郑州</b>
		<!--外部插入-->
		<script>
			$("b").before("<i>河南省</i>");//前插入
			$("b").after("<a href='http://www.baidu.com'>大学</a>");//后插入
		</script>
</html>

在这里插入图片描述

包裹
①wrap(html)：把所有匹配的元素用其他元素的结构化标记包裹起来。
②wrapAll(html) ：将所有匹配的元素用一个元素来包裹，而 wrap() 方法是将所有的元素进行单独包裹。
③wrapInner(html)：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.
④unwrap() ：移出匹配元素的父元素，用于取消wrap()方法的效果。

<!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>

在这里插入图片描述

这个名字真难起

关注

0
点赞
踩
0

收藏

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

添加DOM节点内部插入①append(content) ：向每个匹配元素内部的末尾处插入内容；②appendTo(content) ：将每个匹配的元素追加到指定的元素中的内部的末尾；③prepend(content) ：向每个匹配元素内部的开始处插入内容；④prependTo(content)：将每个匹配的元素插入到指定的元素内部的开始处；<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g
复制链接

扫一扫