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

深藏阁楼爱情的钟 2021-08-13 17:11 447阅读 0赞

#### 插入节点 ####

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

<table> 
 <thead> 
  <tr> 
   <th align="center">类型</th> 
   <th align="center">方法</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">内部插入</td> 
   <td align="center">append()</td> 
   <td align="center">向每个匹配的元素内部追加由参数指定的内容</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">appendTo()</td> 
   <td align="center">把所有匹配的元素追加到指定的元素中</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">prepend()</td> 
   <td align="center">向每个匹配的元素内部前置内容</td> 
  </tr> 
  <tr> 
   <td align="center">外部插入</td> 
   <td align="center">after()</td> 
   <td align="center">在每个匹配的元素之后插入内容</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">before()</td> 
   <td align="center">在每个匹配的元素之前插入内容</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">insertAfter()</td> 
   <td align="center">把所有匹配的元素插入到指定的元素后面</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center">insertVefore()</td> 
   <td align="center">把所有匹配的元素插入到指定的元素后面</td> 
  </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/891b67fcbb67452d867308784f4fde16.png