innerHTML與jquery里的html()區(qū)別介紹

更新時(shí)間：2012年10月12日 11:36:35 投稿：mdxy-dxy

我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的，jquery是多此一舉了，直到我遇到一次問(wèn)題

看個(gè)示例：

 
var tbody=document.createElement('tbody'); 

tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只讀的</td></tr>'; //在IE下報(bào)錯(cuò)，目標(biāo)對(duì)象錯(cuò)誤

現(xiàn)在用jquery的html試試，

復(fù)制代碼代碼如下:

$(tbody).html('<tr><td>IE下tbody的innerHTML是只讀的</td></tr>');

發(fā)現(xiàn)IE下用jquery能正確顯示了，沒(méi)任何問(wèn)題。
后來(lái)查閱資料才知道，原來(lái)IE下tbody、tr這些的innerHTML都是只讀的，不允許寫入，而在其他瀏覽器下則沒(méi)問(wèn)題。

而jquery里是用了try，catch來(lái)檢測(cè)，如果報(bào)錯(cuò)則在catch里重新調(diào)用this.empty().append(value)，是通過(guò)append來(lái)添加字符串的。

jquery 如何使用innerHTML

$("#responsediv") 是個(gè)Jquery對(duì)象，它Val()是對(duì)Value屬性賦值對(duì)它無(wú)意義，Jquery沒(méi)有innerHTML這個(gè)屬性，應(yīng)該這樣寫$("#responsediv")[0].innerHTML=msg 就可以獲得這個(gè)Dom對(duì)象使用innerHTML。

今天在這個(gè)基礎(chǔ)上加上了一個(gè)后加載廣告的方法：

代碼如下：

<div id="logo_m"></div>
<script>
function doad(datastr,id){ 
//getid(id).innerHTML = datastr; 這個(gè)是原生js的寫法
$("#"+id).html(datastr); //這個(gè)是jquery寫法
}
/*
上面的都是直接的字符串寫入，不能是js代碼
下面的代碼利用的是jquery的append加載google廣告不錯(cuò)，百度的好像不能用。后加載百度的可以是用百度管家自帶的函數(shù)。
*/
function doad2(datastr,id){ 
$("#"+id).append(datastr);
}

var logo_m='<a  target="_blank"><img src="http://img.jbzj.com/image/kongbao_370.gif" width=370 height=60 /></a>';
doad(logo_m,'logo_m');
</script>

百度管家自帶的后加載廣告的代碼，基于jquery

<div id="tonglanbd"></div>
<script type="text/javascript">
$.getScript("http://cbjs.baidu.com/js/m.js", function() {
BAIDU_CLB_fillSlotAsync("廣告id，不能帶u","tonglanbd");
});
</script>

您可能感興趣的文章:

innerHTML

相關(guān)文章

jquery淡入淡出效果簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery淡入淡出效果簡(jiǎn)單實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery中fadeIn及fadeOut實(shí)現(xiàn)淡入淡出的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
jquery如何獲取復(fù)選框的值
獲取復(fù)選框的值的方法有很多，舉不勝舉，在本文將為大家介紹下jquery是如何獲取復(fù)選框的值的，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
jquery單擊文字或圖片內(nèi)容放大并居中顯示
這篇文章主要為大家詳細(xì)介紹了jquery單擊文字或圖片內(nèi)容放大并居中顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
詳解jQuery中的easyui
jQuery EasyUI是一組基于jQuery的UI插件集合體，而jQuery EasyUI的目標(biāo)就是幫助web開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。這篇文章主要介紹了jQuery中的easyui ,需要的朋友可以參考下
2018-09-09
jQuery實(shí)現(xiàn)頁(yè)面下拉100像素出現(xiàn)懸浮窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁(yè)面下拉100像素出現(xiàn)懸浮窗口的方法,涉及jQuery事件監(jiān)聽(tīng)及針對(duì)頁(yè)面元素的判定與動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-09-09
jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
一句jQuery代碼實(shí)現(xiàn)返回頂部效果（簡(jiǎn)單實(shí)用）
本文主要分享了利用一句jQuery代碼實(shí)現(xiàn)返回頂部效果的實(shí)例。代碼簡(jiǎn)單，保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來(lái)看下吧
2016-12-12
jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery懸停文字提示框插件jquery.tooltipster.js用法,涉及jQuery文字提示框插件的引入與調(diào)用實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-07-07
ASP.NET jQuery 實(shí)例2 (表單中使用回車在TextBox之間向下移動(dòng))
每次當(dāng)用戶在一個(gè)文本框輸入完數(shù)據(jù)后，更希望在敲入回車鍵后，焦點(diǎn)會(huì)自動(dòng)移動(dòng)到下一個(gè)文本框
2012-01-01
jQuery中ajax的load()與post()方法實(shí)例詳解
這篇文章主要介紹了jQuery中ajax的load()與post()方法,結(jié)合實(shí)例詳細(xì)分析了jQuery中l(wèi)oad()與post()方法實(shí)現(xiàn)ajax交互的相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下
2016-01-01