jQuery--插入节点之内部插入（append()、appendTo()、prepend()、prependTo()）详解

最新推荐文章于 2022-05-12 22:22:36 发布

吴声子夜歌

最新推荐文章于 2022-05-12 22:22:36 发布

阅读量3.5k

点赞数 6

分类专栏： jQuery 文章标签： JQuery append() appendTo() prepend() prependTo()

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

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

插入节点

在动态创建HTML元素节点后，还需将节点插入到文档中才有用。根据元素的插入位置不同，插入方法分为内部插入和外部插入，如下表：

类型	方法	描述
内部插入	append()	向每个匹配的元素内部追加由参数指定的内容
	appendTo()	把所有匹配的元素追加到指定的元素中
	prepend()	向每个匹配的元素内部前置内容
外部插入	after()	在每个匹配的元素之后插入内容
	before()	在每个匹配的元素之前插入内容
	insertAfter()	把所有匹配的元素插入到指定的元素后面
	insertVefore()	把所有匹配的元素插入到指定的元素后面

1. append()方法：
append()方法用于向匹配元素的尾部追加指定的内容，其语法格式如下：

$(selector).append(content);
$(selector).append(function(index, oldHtmlCode));

$(selector)：表示要追加内容的元素
content：表示要追加的内容
function(index, oldHtmlCode)：表示将函数的返回值作为追加的内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前元素在修改前的HTML内容。

示例：

//在appendDiv尾部追加一幅图像
$("#appendDiv").append($("<img src='images/pic1.jpg' />"));
//根据ID进行匹配，在index为0的div尾部追加一幅图像
$("div[id^=append]").append(function(index,oldHtmlCode){
	//将匹配元素的index和原有内容打印到控制台
	console.log("append()方法：下标"+index+"，原有内容："+oldHtmlCode);
});

2. appendTo()方法：
appendTo()方法用于将匹配元素追加到指定元素的尾部，该方法与append()方法的区别是：被追加的内容和匹配元素的位置不同。appendTo()方法的语法格式如下：

$(content).appendTo(selector)

$(content)：表示追加的内容
selector：表示要追加内容的元素

示例：

//创建一个节点，并添追加到appendToDiv尾部
$("<img src='images/pic3.jpg' />").appendTo($("#appendToDiv"));
//将id为image8的图像，追加到appendToDiv尾部(相当于元素的移动操作）
$("#image8").appendTo($("#appendToDiv"));

3. prepend()方法：
prepend()方法用于向匹配元素的头部插入指定的内容，其语法格式如下：

$(selector).prepend(content)
$(selector).prepend(function(index, oldHtmlCode))

$(selector)：表示要插入内容的元素
content：表示要插入的内容
(function(index, oldHtmlCode)：表示将函数的返回值作为插入的内容，index表示当前元素在集合中的索引位置，oldHtmlCode表示当前元素在修改前的HTML内容

示例：

//在prependDiv的头部插入一幅图像
$("#prependDiv").prepend($("<img src='images/pic3.jpg' />"));
//根据ID进行匹配，在index为0的div头部插入一幅图像
$("div[id^=prepend]").prepend(function(index,oldHtmlCode){
	//将匹配元素的index和原有内容打印到控制台
	console.log("prepend()方法：下标"+index+"，原有内容："+oldHtmlCode);
	if(index==0){
		 return "<img src='images/pic4.jpg' />";
	}
});

4. prependTo()方法：
prependTo()方法用于将匹配元素插入指定元素的头部，该方法与prepend()方法的区别是：被插入的内容和匹配元素的位置不同。prependTo()方法的语法格式如下：

$(content).prependTo(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;}
		img{height:50px;}
	</style>
  </head>
  <body>
	<div id="appendDiv">append()</div>
	<div id="appendToDiv">appendTo()</div>
	<div id="prependDiv">prepend()</div>
	<div id="prependToDiv">prependTo()</div>
	<hr/>
	<img src='images/pic8.jpg' id="image8"/>
	<img src='images/pic9.jpg' id="image9"/>
	<script type="text/javascript">
		$(function(e){
			//在appendDiv尾部追加一幅图像
			$("#appendDiv").append($("<img src='images/pic1.jpg' />"));
			//根据ID进行匹配，在index为0的div尾部追加一幅图像
			$("div[id^=append]").append(function(index,oldHtmlCode){
				//将匹配元素的index和原有内容打印到控制台
				console.log("append()方法：下标"+index+"，原有内容："+oldHtmlCode);
				if(index==0){
					 return "<img src='images/pic2.jpg' />";
				}
			});
			//创建一个节点，并添追加到appendToDiv尾部
			$("<img src='images/pic3.jpg' />").appendTo($("#appendToDiv"));
			//将id为image8的图像，追加到appendToDiv尾部(相当于元素的移动操作）
			$("#image8").appendTo($("#appendToDiv"));
			
			//在prependDiv的头部插入一幅图像
			$("#prependDiv").prepend($("<img src='images/pic3.jpg' />"));
			//根据ID进行匹配，在index为0的div头部插入一幅图像
			$("div[id^=prepend]").prepend(function(index,oldHtmlCode){
				//将匹配元素的index和原有内容打印到控制台
				console.log("prepend()方法：下标"+index+"，原有内容："+oldHtmlCode);
				if(index==0){
					 return "<img src='images/pic4.jpg' />";
				}
			});
			//创建一个节点，并添插入到prependToDiv头部
			$("<img src='images/pic5.jpg' />").prependTo($("#prependToDiv"));
			//将id为image9的图像，插入到prependToDiv头部(相当于元素的移动操作)
			$("#image9").prependTo($("#prependToDiv"));
		});
	</script>
  </body>
</html>

在这里插入图片描述

吴声子夜歌

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
jQuery--插入节点之内部插入（append()、appendTo()、prepend()、prependTo()）详解

插入节点在动态创建HTML元素节点后，还需将节点插入到文档中才有用。根据元素的插入位置不同，插入方法分为内部插入和外部插入，如下表：类型方法描述内部插入append()向每个匹配的元素内部追加由参数指定的内容appendTo()把所有匹配的元素追加到指定的元素中prepend()向每个匹配的元素内部前置内容外部插入after()在每个匹配...
复制链接

扫一扫

专栏目录