jquery append()方法與html()方法的區(qū)別及使用介紹
append(content):方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容,有很多朋友覺(jué)得append與html差不多,其它從英文意義上append是在原有基礎(chǔ)上增加,而html中是替換當(dāng)前所有內(nèi)容。
定義和用法
append() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。
$(selector).append(content)
使用函數(shù)來(lái)附加內(nèi)容
使用函數(shù)在指定元素的結(jié)尾插入內(nèi)容。
語(yǔ)法
$(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)使用該方法返回一個(gè)值時(shí),它會(huì)返回第一個(gè)匹配元素的內(nèi)容。
語(yǔ)法
$(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>注銷失敗,請(qǐng)重新嘗試!</strong></p>"); } }); });
下面是網(wǎng)友的補(bǔ)充:
當(dā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>
- 表單元素事件 (Form Element Events)
- Javascript處理DOM元素事件實(shí)現(xiàn)代碼
- jQuery 追加元素的方法如append、prepend、before
- jquery 新建的元素事件綁定問(wèn)題解決方案
- JavaScript利用append添加元素報(bào)錯(cuò)的解決方法
- PHP中auto_prepend_file與auto_append_file用法實(shí)例分析
- iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
- jquery中append()與appendto()用法分析
- jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案
相關(guān)文章
jQuery插件之jQuery.Form.js用法實(shí)例分析(附demo示例源碼)
這篇文章主要介紹了jQuery插件之jQuery.Form.js用法,結(jié)合實(shí)例形式分析了jQuery.Form.js的具體使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01jQuery powerFloat萬(wàn)能浮動(dòng)層下拉層插件使用介紹
支持hover, click, focus以及無(wú)事件觸發(fā);支持多達(dá)12種位置的定位,出界自動(dòng)調(diào)整;支持頁(yè)面元素加載,Ajax加載,下拉列表,提示層效果,tip類效果等;可自定義裝載容器;內(nèi)置UI不錯(cuò)的裝載容器;支持鼠標(biāo)跟隨等。2010-12-12jQuery插件Easyui設(shè)置datagrid的pageNumber導(dǎo)致兩次請(qǐng)求問(wèn)題的解決方法
這篇文章主要介紹了jQuery插件Easyui設(shè)置datagrid的pageNumber導(dǎo)致兩次請(qǐng)求問(wèn)題的解決方法,較為詳細(xì)的描述了出現(xiàn)的問(wèn)題、問(wèn)題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07js(jQuery)獲取時(shí)間的方法及常用時(shí)間類搜集
獲取時(shí)間的方法及常用時(shí)間類都是大家經(jīng)常使用的,在本文為大家整理了一些,個(gè)人感覺(jué)還比較全,感興趣的朋友可以收集下2013-10-10jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果,結(jié)合完整實(shí)例形式分析了echarts繪制多柱子柱狀圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery Easyui Datagrid實(shí)現(xiàn)批量操作(編輯,刪除,添加)
本篇文章主要介紹了jquery Easyui Datagrid實(shí)現(xiàn)批量操作(編輯,刪除,添加),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jQuery鏈?zhǔn)秸{(diào)用與show知識(shí)淺析
這篇文章主要介紹了jQuery的XX如何實(shí)現(xiàn)?——2.show與鏈?zhǔn)秸{(diào)用 的相關(guān)資料,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05