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

蔚落 2021-08-14 01:49 388阅读 0赞

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

示例：

//在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>

![在这里插入图片描述][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/5cb67cbdd43f4a6ab287b6271de345f8.png