插入节点

在动态创建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>

jquery覆盖追加 jquery内部追加_append()