jQuery--插入节点之外部插入（after()、before()、insertAfter()、insertBefore()）详解

最新推荐文章于 2024-03-26 09:29:39 发布

吴声子夜歌

最新推荐文章于 2024-03-26 09:29:39 发布

阅读量1.3k

点赞数 4

分类专栏： jQuery 文章标签： jQuery after() before() insertAfter() insertBefore()

本文链接：https://blog.csdn.net/cold___play/article/details/101925442

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

1. after()方法：
after()方法用于在所匹配的元素之后插入内容，其语法格式如下：

$(selector).after(content)
$(selector).after(function(index, htmlCode))

$(selector)：表示所匹配的元素
content：表示被插入的内容
function(index, htmlCode)：表示将函数的返回值作为要插入的内容，index表示当前元素在集合中的索引位置，htmlCode（可选）表示当前元素的HTML内容，当插入内容时不会改变该元素的HTML内容

示例：

//在afterDiv元素的后面插入一幅图像
$("#afterDiv").after($("<img src='images/pic1.jpg' />"));
//根据ID进行匹配，在index为0的div元素的后面
$("#afterDiv,#insertAfterDiv").after(function(index,htmlCode){
	//将匹配元素的index和原有内容打印到控制台
	console.log("after()方法：下标"+index+"，元素的内容："+htmlCode);
});

2. insertAfter()方法：
insertAfter()方法用于在所匹配元素之后插入内容，该方法与after()方法的区别是：插入内容与匹配元素的位置不同。语法格式如下：

$(content).insertAfter(selector)

$(content)：表示被插入的内容
selector：表示所匹配的元素

示例：

//创建一个节点，并在insertAfterDiv元素之后插入该节点
$("<img src='images/pic3.jpg' />").insertAfter($("#insertAfterDiv"));
//将id为image8的图像，插入到insertAfterDiv元素的后面(相当于元素的移动操作）
$("#image8").insertAfter($("#insertAfterDiv"));

3. before()方法：
before()方法用于在所匹配的元素之前插入内容，其语法格式如下：

$(selector).before(content)
$(selector).fefore(function(index, htmlCode))

$(selector)：表示所匹配的元素
content：表示被插入的内容
function(index, htmlCode)：表示将函数的返回值作为要插入的内容，index表示当前元素在集合中的索引位置，htmlCode（可选）表示当前元素的HTML内容，当插入内容时不会改变该元素的HTML内容

示例：

//在beforeDiv元素之前插入一幅图片
$("#beforeDiv").before($("<img src='images/pic4.jpg' />"));
//根据ID进行匹配，在index为0的div元素的前面
$("#beforeDiv,#insertBeforeDiv").before(function(index,htmlCode){
	//将匹配元素的index和原有内容打印到控制台
	console.log("before()方法：下标"+index+"，元素的内容："+htmlCode);
});

4. insertBefore()方法：
insertBefore()方法用于在所匹配的元素之间插入内容，该方法与before()方法的区别是：插入内容与匹配元素之间的位置不同。语法格式如下：

$(content).insertBefore(selector)

$(content)：表示被插入的内容
selector：表示所匹配的元素

示例：

<!doctype html>
<html>
  <head>
	<meta charset="utf-8">
	<title>在元素外部插入内容-jQuery</title>
	<script type="text/javascript" src="js/jquery-1.x.js"> </script>
	<style type="text/css">
		div{width:300px;height:60px;border:1px solid #666; display:inline;
				line-height:30px; padding:5px 5px;}
		img{height:50px;}
	</style>
  </head>
  <body>
	<div id="afterDiv">after()</div><br/>
	<div id="insertAfterDiv">insertAfter()</div><br/>
	<div id="beforeDiv">before()</div><br/>    
	<div id="insertBeforeDiv">insertBefore()</div><br/>
	<img src='images/pic8.jpg' id="image8"/>
	<img src='images/pic9.jpg' id="image9"/>
	<script type="text/javascript">
	  $(function(e){
		//在afterDiv元素的后面插入一幅图像
		$("#afterDiv").after($("<img src='images/pic1.jpg' />"));
		//根据ID进行匹配，在index为0的div元素的后面
		$("#afterDiv,#insertAfterDiv").after(function(index,htmlCode){
			//将匹配元素的index和原有内容打印到控制台
			console.log("after()方法：下标"+index+"，元素的内容："+htmlCode);
			if(index==0){
				 return $("<img src='images/pic2.jpg' />");
			}
		});
		//创建一个节点，并在insertAfterDiv元素之后插入该节点
		$("<img src='images/pic3.jpg' />").insertAfter($("#insertAfterDiv"));
		//将id为image8的图像，插入到insertAfterDiv元素的后面(相当于元素的移动操作）
		$("#image8").insertAfter($("#insertAfterDiv"));
		
		//在beforeDiv元素之前插入一幅图片
		$("#beforeDiv").before($("<img src='images/pic4.jpg' />"));
		//根据ID进行匹配，在index为0的div元素的前面
		$("#beforeDiv,#insertBeforeDiv").before(function(index,htmlCode){
			//将匹配元素的index和原有内容打印到控制台
			console.log("before()方法：下标"+index+"，元素的内容："+htmlCode);
			if(index==0){
				 return $("<img src='images/pic5.jpg' />");
			}
		});
		//创建一个节点，并在insertBeforeDiv元素之前插入该节点
		$("<img src='images/pic6.jpg' />").insertBefore($("#insertBeforeDiv"));
		//将id为image9的图像，插入到insertBeforeDiv元素的前面(相当于元素的移动操作）
		$("#image9").insertBefore($("#insertBeforeDiv"));
	  });
	</script>
  </body>
</html>

在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery--插入节点之外部插入（after()、before()、insertAfter()、insertBefore()）详解

1. after()方法：after()方法用于在所匹配的元素之后插入内容，其语法格式如下：$(selector).after(content)$(selector).after(function(index, htmlCode))$(selector)：表示所匹配的元素content：表示被插入的内容function(index, htmlCode)：表示将函数的返回值作为要插入...
复制链接

扫一扫