innerHTML与jquery里的html()区别介绍

更新时间：2012年10月12日 11:36:35 投稿：mdxy-dxy

我原本一直以为innerHTML和jquery里的html其实是完全一样的，jquery是多此一举了，直到我遇到一次问题

看个示例：

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

tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只读的</td></tr>'; //在IE下报错，目标对象错误

现在用jquery的html试试，

复制代码代码如下:

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

发现IE下用jquery能正确显示了，没任何问题。
后来查阅资料才知道，原来IE下tbody、tr这些的innerHTML都是只读的，不允许写入，而在其他浏览器下则没问题。

而jquery里是用了try，catch来检测，如果报错则在catch里重新调用this.empty().append(value)，是通过append来添加字符串的。

jquery 如何使用innerHTML

$("#responsediv") 是个Jquery对象，它Val()是对Value属性赋值对它无意义，Jquery没有innerHTML这个属性，应该这样写$("#responsediv")[0].innerHTML=msg 就可以获得这个Dom对象使用innerHTML。

今天在这个基础上加上了一个后加载广告的方法：

代码如下：

<div id="logo_m"></div>
<script>
function doad(datastr,id){ 
//getid(id).innerHTML = datastr; 这个是原生js的写法
$("#"+id).html(datastr); //这个是jquery写法
}
/*
上面的都是直接的字符串写入，不能是js代码
下面的代码利用的是jquery的append加载google广告不错，百度的好像不能用。后加载百度的可以是用百度管家自带的函数。
*/
function doad2(datastr,id){ 
$("#"+id).append(datastr);
}

var logo_m='<a href="http://www.danhw.com/" target="_blank"><img src="//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

jQuery实现动态添加节点与遍历节点功能示例
这篇文章主要介绍了jQuery实现动态添加节点与遍历节点功能,结合实例形式分析了jQuery针对页面元素节点元素的动态添加与遍历相关操作技巧,需要的朋友可以参考下
2017-11-11
jQuery中closest和parents的区别分析
本文给大家介绍jquery中parents()和closest()用法与区别介绍，在jquery中parents()查找父级元素删除的时候，发现它不包含根元素，于是用了closest()，效果不错，下面我来给大家具体的介绍一下
2015-05-05
jquery处理json对象
JSON(JavaScript Object Notation)javscript对象标记，是一种轻量级的数据交换格式。具体的详细基础知识可以参考JSON官网http:/www.json.org/。不说太多废话，直接说说我对JSON的理解吧。
2014-11-11
jQuery实现最简单实用的分秒倒计时
这篇文章主要为大家详细介绍了jQuery实现最简单实用的分秒倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
创建自己的jquery表格插件
这篇文章主要介绍了一个自己创建的jquery表格插件，实现了基本的json数据的动态加载，自动分页，全选全不选，鼠标悬浮变色，隔行变色等，感兴趣的小伙伴们可以参考一下
2015-11-11
jQuery学习笔记之jQuery选择器的使用
jQuery中最核心和最让人爱不释手的就是选择器，下面就是各种选择器代笔的意义。
2010-12-12
浏览器常用高宽的jquery插件
兼容BackCompat,CSS1Compat两模式渲染的页面,测试的浏览器 :friefox ie678 chrome opera
2011-02-02
jquery实现商品拖动选择效果代码(自写)
商品拖动选择效果如图所示，感兴趣的朋友已经迫不及待想实现了吧，下面与大家分享下具体的实现思路及处理程序
2013-05-05
一看就懂：jsonp详解
这篇文章主要介绍了一看就懂：jsonp详解,本文用浅显易懂的语言组织讲解了什么是jsonp、jsonp怎么用、jsonp使用实例等内容,需要的朋友可以参考下
2015-06-06
jQuery EasyUI中对表格进行编辑的实现代码
对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
2010-06-06