jquery插入节点

最新推荐文章于 2023-06-27 09:12:47 发布

this_is_art_of_code

最新推荐文章于 2023-06-27 09:12:47 发布

阅读量1.3k

点赞数 2

分类专栏： jquery 文章标签： jquery 插入节点

本文链接：https://blog.csdn.net/qq_28596151/article/details/80413292

版权

jquery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

jquery插入节点是一个非常有用的而且操作简单的功能点。在实际开发中我们难免会需要动态创建节点，用于展示我们的数据或者动态创建节点用于我们自己特有的业务。

jquery提供了好几个插入方法：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。下面我们一一讲解这几个方法。

1、append()方法

解释:向每一个匹配到的元素内部追加内容。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
	</ul>
</body>
<script> 
	$(function(){
		$("li").append("<b>你好</b>");
	});
</script>
</html>

2、appendTo()方法

将所有匹配的元素追加到指定的元素中。语法：$(A).appendTo(B)。实际就是把A添加到B中。

A可以是新建的jquery元素节点，也可以是已经存在文档中通过选择器定位到的元素节点。

B代表的是目的地。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
	</ul>
</body>
<script> 
	$(function(){
		$("p").appendTo("li");
	});
</script>
</html>

上面的代码代表的就是将文档中已经存在的p元素节点追加到匹配到的li元素之中。此时，原来的p会消失，出现我们匹配的地方。

3、prepend()方法

向每一个匹配到的元素内部的最前面追加内容。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
	</ul>
</body>
<script> 
	$(function(){
		//将文档中的li元素前置到p元素当中，同时原来位置的li元素会消失
		$("p").prepend($("li"));
		//回复到文档最初的样子
		$("ul").prepend($("li"));
		//前置添加新新创建的元素
		$("ul").prepend("<li>最前面</li>");
	});
</script>
</html>

4、prependTo()方法

有了appendTo()方法作为基础，我们再次理解prependTo()方法应该是手到擒来。就是像每一个匹配到的元素追加到指定的元素节点中。而且追加的位置时目的元素节点的最前面。语法：$(A).prependTo(B);

A可以是文档中已经存在的元素同时也可以是新建的元素节点，代表的是选择器或者直接是节点。

B代表的是目的元素，一般是选择器。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
	</ul>
</body>
<script> 
	$(function(){
		//将p元素前置到文档中li元素内部的最前面
		$("p").prependTo("li");//等价于$("p").prependTo($("li"));
		//再将p元素前置到文档中ul元素的内部的最前面
		$("p").prependTo("ul");
	});
</script>
</html>

前面的四种方法都是在指定元素的内部插入节点。而下面的四种方法都是在指定元素的外部的前面或者后面插入节点。

5、after()方法

就是在指定元素的外部后追加元素。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
	</ul>
</body>
<script> 
	$(function(){
		//在p元素的后面同时是ul的前面添加li元素，同时之前在ul中的li元素消失
		$("p").after($("li"));
		
	});
</script>
</html>

6、insertAfter()方法

语法：$(A).insertAfter(B)。就是将A添加到B的元素外的后面。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的dom操作</title>
	<script src="../jquery-1.3.1.js"></script>
</head>
<body>
	<p title="选择你喜欢的水果">你最喜欢的水果是?</p>
	<ul> 
		<li title="苹果">苹果</li>
		<li title="橘子title">橘子</li>
		<li title="菠萝">菠萝</li>
	</ul>
</body>
<script> 
	$(function(){
		//在p元素的后面同时是ul的前面添加li元素，同时之前在ul中的li元素消失
		$("p").insertAfter("li");//$("p").等价于insertAfter.($("li"));
		
	});
</script>
</html>

上下的before()方法和insertBefore()放发和after()放差不多，就是意思相反。

this_is_art_of_code

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jquery插入节点

jquery插入节点是一个非常有用的而且操作简单的功能点。在实际开发中我们难免会需要动态创建节点，用于展示我们的数据或者动态创建节点用于我们自己特有的业务。 jquery提供了好几个插入方法：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。下面我们一一讲解这...
复制链接

扫一扫