JQuery中html、append、appendTo、after、insertAfter系列方法

1. html方法，给元素添加html代码或者清空html代码（参数为空字符串）；
   
2. append向元素的末尾添加html代码；
   
3. appendTo这个方法跟append方法的很像，只是要添加的html代码的目标有所不同；
   
4. after向元素的后边添加html代码，若是元素后面有元素了，那将后面的元素后移，而后将html代码插入；
5. before向元素的前边添加html代码，若是元素前面有元素了，那将前面的元素前移，而后将html代码插入；
   
6. insertAfter将JQuery封装好的元素插入到指定元素的后面，若是元素后面有元素了，那将后面的元素后移，而后将JQuery对象插入；
   
7. insertBefore将JQuery封装好的元素插入到指定元素的前面，若是元素前面有元素了，那将前面的元素前移，而后将JQuery对象插入；
   
8. empty清空元素内部的html代码，它只是清空内部的html代码，可是标记仍然留在DOM中；
   
9. remove从DOM中移除整个元素；

　　须要指出的重要的一点：JQuery会自动的完善html代码，也就是说，假如你要执行如下操做

[javascript] view plain copy

1. $('content').append('<p>CSDN');  

[javascript] view plain copy

1. $('content').append('<p>CSDN');  

那么实际插入到标记中的html代码是

[html] view plain copy

1. <p>CSDN</p>  

[html] view plain copy

1. <p>CSDN</p>  

　　这一点须要特别注意，不少教程之类的只是讲解这些函数的动做，可是会忽略一些细节；

　　下面让我来详细解释一下每一个函数的做用以及它是如何工做的，会产生什么效果。之后的代码我都对这样的一个模板来操做，代码以及效果以下：

[css] view plain copy

1. <style type="text/css">  
2.          .box  
3.          {  
4.              width:100px;   
5.              height:100px;   
6.              border:2px solid red;  
7.              padding:10px;  
8.              text-align:center;  
9.          }  
10.          .child  
11.          {  
12.              width:70px;   
13.              height:20px;   
14.              border:2px solid red;  
15.              text-align:center;  
16.          }  
17.     </style>  

[css] view plain copy

1. <style type="text/css">  
2.          .box  
3.          {  
4.              width:100px;   
5.              height:100px;   
6.              border:2px solid red;  
7.              padding:10px;  
8.              text-align:center;  
9.          }  
10.          .child  
11.          {  
12.              width:70px;   
13.              height:20px;   
14.              border:2px solid red;  
15.              text-align:center;  
16.          }  
17.     </style>  

[html] view plain copy

1. <div id="top" class="box">  
2.     <span>top</span>  
3. </div>  
4. <div id="middle" class="box">  
5.     <span>middle</span>  
6. </div>  
7. <div id="bottom" class="box">  
8.     <span>bottom</span>  
9. </div>  

[html] view plain copy

1. <div id="top" class="box">  
2.     <span>top</span>  
3. </div>  
4. <div id="middle" class="box">  
5.     <span>middle</span>  
6. </div>  
7. <div id="bottom" class="box">  
8.     <span>bottom</span>  
9. </div>  

 

　　原始的效果图：

　　1、html函数的使用

　　咱们执行如下语句：

[javascript] view plain copy

1. $('#middle').html('<div class="child">html()');  

[javascript] view plain copy

1. $('#middle').html('<div class="child">html()');  

　　效果图以下：

　　再来看看最终的代码：

　　这里是完整的html代码，也就是说JQuery为咱们补全了代码，这一点须要注意，JQuery为咱们带来了方便，可是当咱们须要精确控制html代码的时候，须要注意一点。

　　html函数的做用原理首先是移除目标元素内部的html代码，而后将新代码添加到目标元素。

2、append、appendTo函数的使用

　　执行如下语句：

[javascript] view plain copy

1. $('#middle').append('<div class="child">append()</div>');  

[javascript] view plain copy

1. $('#middle').append('<div class="child">append()</div>');  

　　注：为了编程规范，html代码我以后都使用完整的html标记。

　　效果图以下：

　　最终的代码：

　　append函数将html附加到了<span>middle</span>以后。

　　appendTo函数的效果和append同样，只不过是写法不同：

[javascript] view plain copy

1. $('<div class="child">append()</div>').appendTo('#middle');  

[javascript] view plain copy

1. $('<div class="child">append()</div>').appendTo('#middle');  

　　appendTo首先将html代码封装成jquery对象，而后添加到指定的目标位置。

3、after、insertAfter函数的使用

　　执行如下语句：

[javascript] view plain copy

1. $('#middle').after('<div class="child">after()</div>');  

[javascript] view plain copy

1. $('#middle').after('<div class="child">after()</div>');  

　　效果图：

　　after函数的做用是将html代码插入指定元素的后面，若是后面有元素，则将其后移，而后插入html代码。

　　insertAfter函数与after函数的做用是同样的，上面代码的insertAfter版本为：

[javascript] view plain copy

1. $('<div class="child">after()</div>').after('#middle');  

[javascript] view plain copy

1. $('<div class="child">after()</div>').after('#middle');  

　　4、before、insertBefore函数的使用

　　这连个函数的原理与after、insertAfter是同样的，只不过before、insertBefore是插入到目标元素的前面，你们能够自行参考after、insertAfter。

　　5、empty、remove函数的使用

　　执行如下代码：

[javascript] view plain copy

1. $('#middle').empty();  

[javascript] view plain copy

1. $('#middle').empty();  

　　效果图：

　　再来看看最终的html代码：

[html] view plain copy

1. <div id="middle" class="box"></div>  

[html] view plain copy

1. <div id="middle" class="box"></div>  

　　里面的html代码被清空了，然而元素自己还在。

　　执行如下语句：

[javascript] view plain copy

1. $('#middle').remove();  

[javascript] view plain copy

1. $('#middle').remove();  

　　效果图：

　　最终的html代码：

[html] view plain copy

1. <div id="top" class="box">  
2.     <span>top</span>  
3. </div>  
4. <div id="bottom" class="box">  
5.     <span>bottom</span>  
6. </div>  

[html] view plain copy

1. <div id="top" class="box">  
2.     <span>top</span>  
3. </div>  
4. <div id="bottom" class="box">  
5.     <span>bottom</span>  
6. </div>