jquery append()方法與html()方法的區(qū)別及使用介紹
append(content):方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容,有很多朋友覺得append與html差不多,其它從英文意義上append是在原有基礎(chǔ)上增加,而html中是替換當前所有內(nèi)容。
定義和用法
append() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。
$(selector).append(content)
使用函數(shù)來附加內(nèi)容
使用函數(shù)在指定元素的結(jié)尾插入內(nèi)容。
語法
$(selector).append(function(index,html))
實例代碼:
<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ù),則返回被選元素的當前內(nèi)容。
返回元素內(nèi)容
當使用該方法返回一個值時,它會返回第一個匹配元素的內(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)友的補充:
當然不一樣了,append是追加,html是完全替換
比如<p id="1"><p>123</p></p>
$("#1").html("<span>456</span>");
結(jié)果是:<p id="1"><span>456</span></p>
$("#1").append("<span></span>");
結(jié)果是:<p id="1"><p>123</p><span>456</span></p>
相關(guān)文章
jQuery插件之jQuery.Form.js用法實例分析(附demo示例源碼)
這篇文章主要介紹了jQuery插件之jQuery.Form.js用法,結(jié)合實例形式分析了jQuery.Form.js的具體使用技巧與相關(guān)注意事項,需要的朋友可以參考下2016-01-01jQuery powerFloat萬能浮動層下拉層插件使用介紹
支持hover, click, focus以及無事件觸發(fā);支持多達12種位置的定位,出界自動調(diào)整;支持頁面元素加載,Ajax加載,下拉列表,提示層效果,tip類效果等;可自定義裝載容器;內(nèi)置UI不錯的裝載容器;支持鼠標跟隨等。2010-12-12jQuery插件Easyui設(shè)置datagrid的pageNumber導致兩次請求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設(shè)置datagrid的pageNumber導致兩次請求問題的解決方法,較為詳細的描述了出現(xiàn)的問題、問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08jQuery插件echarts實現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery Easyui Datagrid實現(xiàn)批量操作(編輯,刪除,添加)
本篇文章主要介紹了jquery Easyui Datagrid實現(xiàn)批量操作(編輯,刪除,添加),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02