快捷導(dǎo)航

jquery append()方法與html()方法的區(qū)別及使用介紹

更新時間：2014年08月01日 15:08:33 投稿：whsnow

append()方法在被選元素的結(jié)尾插入指定內(nèi)容，html()方法返回或設(shè)置被選元素的內(nèi)容，下面為大家介紹下兩者的區(qū)別及使用

append(content)：方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容,有很多朋友覺得append與html差不多，其它從英文意義上append是在原有基礎(chǔ)上增加，而html中是替換當(dāng)前所有內(nèi)容。

定義和用法

append() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容。
$(selector).append(content)

使用函數(shù)來附加內(nèi)容
使用函數(shù)在指定元素的結(jié)尾插入內(nèi)容。

語法

$(selector).append(function(index,html))

實(shí)例代碼：

<script src="/jquery.min.js" type="text/javascript"></script> 
<style> 
.imgFocus{border: 1px solid #eee;} 
</style> 
<p> </p> 
<script type="text/javascript"> 
var showimg = "<div class='imgFocus'>123456</div>"; 
$("p").append(showimg); 
</script>

html() 方法返回或設(shè)置被選元素的內(nèi)容 (inner HTML)。

如果該方法未設(shè)置參數(shù)，則返回被選元素的當(dāng)前內(nèi)容。
返回元素內(nèi)容
當(dāng)使用該方法返回一個值時，它會返回第一個匹配元素的內(nèi)容。

語法

$(selector).html()

設(shè)置所有 p 元素的內(nèi)容：

$(".btn1").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
});

指定元素中清空

$("a[href$='logout.asp']").click(function(event) { 
event.preventDefault(); 
$.get("/xxlr/Logout.asp","",function(data, textStatus) { 
if (data == 1) { //表明注銷成功 
$('#message').html(""); 
$("#userlogin>div").show(); 
} 
else { 
$('#message').append("<p><strong>注銷失敗,請重新嘗試!</strong></p>"); 
} 
}); 
});

下面是網(wǎng)友的補(bǔ)充：

當(dāng)然不一樣了，append是追加，html是完全替換
比如123
$("#1").html("456");
結(jié)果是：456

$("#1").append("");
結(jié)果是：123456

您可能感興趣的文章:

append
html

相關(guān)文章

jQuery層疊選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery層疊選擇器用法,結(jié)合實(shí)例形式分析了jQuery層疊選擇器功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-06-06
jQuery基于BootStrap樣式實(shí)現(xiàn)無限極地區(qū)聯(lián)動
這篇文章主要介紹了jQuery基于BootStrap樣式實(shí)現(xiàn)無限極地區(qū)聯(lián)動的相關(guān)資料,需要的朋友可以參考下
2016-08-08
調(diào)用HttpHanlder的幾種返回方式小結(jié)
本篇文章主要是對調(diào)用HttpHanlder的幾種返回方式進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
淺談jquery高級方法描述與應(yīng)用
下面小編就為大家?guī)硪黄獪\談jquery高級方法描述與應(yīng)用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
jQuery模仿阿里云購買服務(wù)器選擇購買時間長度的代碼
jQuery仿阿里云購買服務(wù)器選擇時間長度,操作簡單，只需點(diǎn)擊所要選的時間段，對實(shí)現(xiàn)代碼感興趣的朋友參考下
2016-04-04
使用jQueryMobile實(shí)現(xiàn)滑動翻頁效果的方法
這篇文章主要介紹了使用jQueryMobile實(shí)現(xiàn)滑動翻頁效果的方法,較為詳細(xì)的分析了jQueryMobile實(shí)現(xiàn)滑動翻頁效果的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
jQuery的bind()方法使用詳解
bind()定義和用法：bind() 方法向被選元素添加一個或多個事件處理程序，以及當(dāng)事件發(fā)生時運(yùn)行的函數(shù)。
2015-07-07
jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery EasyUI 開源插件套裝完全替代ExtJS
JQuery愛好者們的福音 jQuery EasyUI 開源插件套裝完全替代ExtJS(引用)
2010-03-03
JS自動縮小超出大小的圖片
在文章的正文中，往往會出現(xiàn)一些超大的圖片，把頁面撐開變形，影響了美觀。用這段JS代碼就可解決這個問題，你可以把圖片的最大值限定在一定范圍內(nèi)，當(dāng)圖片大小超出這個尺寸后，就會被自動按比例縮小
2012-10-10