2019獨角獸企業重金招聘Python工程師標準>>>
html方法，給元素添加html代碼或者清空html代碼（參數為空字符串）；
append向元素的末尾添加html代碼；
appendTo這個方法跟append方法的很像，只是要添加的html代碼的目標有所不一樣；
after向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入； before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插入；
insertAfter將JQuery封裝好的元素插入到指定元素的后面，如果元素后面有元素了，那將后面的元素后移，然后將JQuery對象插入；
insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然后將JQuery對象插入；
empty清空元素內部的html代碼，它只是清空內部的html代碼，但是標記仍然留在DOM中；
remove從DOM中移除整個元素； 需要指出的重要的一點：JQuery會自動的完善html代碼，也就是說，假如你要執行以下操作
[javascript] view plain copy
$('content').append('<p>CSDN');?? [javascript] view plain copy
$('content').append('<p>CSDN');?? 那么實際插入到標記中的html代碼是
[html] view plain copy
<p>CSDN</p>?? [html] view plain copy
<p>CSDN</p>?? 這一點需要特別注意，很多教程之類的只是講解這些函數的動作，但是會忽略一些細節；
下面讓我來詳細解釋一下每個函數的作用以及它是如何工作的，會產生什么效果。以后的代碼我都對這樣的一個模板來操作，代碼以及效果如下：
[css] view plain copy
<style?type="text/css">?? ?????????.box?? ?????????{?? ?????????????width:100px;??? ?????????????height:100px;??? ?????????????border:2px?solid?red;?? ?????????????padding:10px;?? ?????????????text-align:center;?? ?????????}?? ?????????.child?? ?????????{?? ?????????????width:70px;??? ?????????????height:20px;??? ?????????????border:2px?solid?red;?? ?????????????text-align:center;?? ?????????}?? ????</style>?? [css] view plain copy
<style?type="text/css">?? ?????????.box?? ?????????{?? ?????????????width:100px;??? ?????????????height:100px;??? ?????????????border:2px?solid?red;?? ?????????????padding:10px;?? ?????????????text-align:center;?? ?????????}?? ?????????.child?? ?????????{?? ?????????????width:70px;??? ?????????????height:20px;??? ?????????????border:2px?solid?red;?? ?????????????text-align:center;?? ?????????}?? ????</style>?? [html] view plain copy
<div?id="top"?class="box">?? ????<span>top</span>?? </div>?? <div?id="middle"?class="box">?? ????<span>middle</span>?? </div>?? <div?id="bottom"?class="box">?? ????<span>bottom</span>?? </div>?? [html] view plain copy
<div?id="top"?class="box">?? ????<span>top</span>?? </div>?? <div?id="middle"?class="box">?? ????<span>middle</span>?? </div>?? <div?id="bottom"?class="box">?? ????<span>bottom</span>?? </div>??
?
原始的效果圖：
一、html函數的使用
我們執行以下語句：
[javascript] view plain copy
$('#middle').html('<div?class="child">html()');?? [javascript] view plain copy
$('#middle').html('<div?class="child">html()');?? 效果圖如下：
再來看看最終的代碼：
這里是完整的html代碼，也就是說JQuery為我們補全了代碼，這一點需要注意，JQuery為我們帶來了方便，但是當我們需要精確控制html代碼的時候，需要注意一點。
html函數的作用原理首先是移除目標元素內部的html代碼，然后將新代碼添加到目標元素。
二、append、appendTo函數的使用
執行以下語句：
[javascript] view plain copy
$('#middle').append('<div?class="child">append()</div>');?? [javascript] view plain copy
$('#middle').append('<div?class="child">append()</div>');?? 注：為了編程規范，html代碼我之后都使用完整的html標記。
效果圖如下：
最終的代碼：
append函數將html附加到了<span>middle</span>之后。
appendTo函數的效果和append一樣，只不過是寫法不一樣：
[javascript] view plain copy
$('<div?class="child">append()</div>').appendTo('#middle');?? [javascript] view plain copy
$('<div?class="child">append()</div>').appendTo('#middle');?? appendTo首先將html代碼封裝成jquery對象，然后添加到指定的目標位置。
三、after、insertAfter函數的使用
執行以下語句：
[javascript] view plain copy
$('#middle').after('<div?class="child">after()</div>');?? [javascript] view plain copy
$('#middle').after('<div?class="child">after()</div>');?? 效果圖：
after函數的作用是將html代碼插入指定元素的后面，如果后面有元素，則將其后移，然后插入html代碼。
insertAfter函數與after函數的作用是一樣的，上面代碼的insertAfter版本為：
[javascript] view plain copy
$('<div?class="child">after()</div>').after('#middle');?? [javascript] view plain copy
$('<div?class="child">after()</div>').after('#middle');?? 四、before、insertBefore函數的使用
這連個函數的原理與after、insertAfter是一樣的，只不過before、insertBefore是插入到目標元素的前面，大家可以自行參考after、insertAfter。
五、empty、remove函數的使用
執行以下代碼：
[javascript] view plain copy
$('#middle').empty();?? [javascript] view plain copy
$('#middle').empty();?? 效果圖：
再來看看最終的html代碼：
[html] view plain copy
<div?id="middle"?class="box"></div>?? [html] view plain copy
<div?id="middle"?class="box"></div>?? 里面的html代碼被清空了，然而元素本身還在。
執行以下語句：
[javascript] view plain copy
$('#middle').remove();?? [javascript] view plain copy
$('#middle').remove();?? 效果圖：
最終的html代碼：
[html] view plain copy
<div?id="top"?class="box">?? ????<span>top</span>?? </div>?? <div?id="bottom"?class="box">?? ????<span>bottom</span>?? </div>?? [html] view plain copy
<div?id="top"?class="box">?? ????<span>top</span>?? </div>?? <div?id="bottom"?class="box">?? ????<span>bottom</span>?? </div>??
轉載于:https://my.oschina.net/baiduapi/blog/526835
總結
以上是生活随笔為你收集整理的JQuery中html、append、appendTo、after、insertAfter系列方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
