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>