平武建站

innerHTML与jquery里html()有哪些区别

小编给大家分享一下innerHTML与jquery里html()有哪些区别，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站制作、资中网络推广、小程序开发、资中网络营销、资中企业策划、资中品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供资中建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

区别：1、html()可以设置tbody、tr这些只读标签，而innerHTML在低版本IE下不行，不可以赋值，赋值的话就脚本报错；2、html()设置的script脚本会执行，innerHTML设置的script脚本不会执行。

InnerHtml() 与html( )的区别

1、html()可以设置tbody、tr这些只读标签，而innerHTML在低版本IE下不行

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

innerHTML 是从对象的起始位置到终止位置的全部内容,包括Html标签

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

看个示例：

var tbody=document.createElement('tbody');
tbody.innerHTML='IE下tbody的innerHTML是只读的'; //在IE下报错，目标对象错误

现在用jquery的html试试，

$(tbody).html('IE下tbody的innerHTML是只读的');

发现IE下用jquery能正确显示了，没任何问题。

后来查阅资料才知道：

jQuery的html()做了些容错处理，原生的Dom API innerHTML有些元素是不支持的，比如table tr等元素，IE下tbody、tr这些的innerHTML都是只读的，不允许写入，而在其他浏览器下则没问题。

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

而IE里有些元素的innerHTML是只读的：

在IE6,IE7,IE8,IE9里面 col, colGroup, frameSet, html, head, style,table, tBody, tFoot, tHead, title, tr 这几个的innerHTML属性是只读的，不可以赋值，赋值的话就脚本报错。IE10这些标签的innerHTML改成可写的了。

既然在IE6-IE9里这些标签的innerHTML属性是只读的，那么我们尽量避免对这些标签的innerHTML属性赋值，比如说对table的innerHTML可以改为对table父元素(假设是p)的innerHTML属性赋值。

2、html()设置的script脚本会执行，innerHTML设置的script脚本不会执行。

因为jQuery 会把强行让参数字符串中的script 标签生效（方式是create and replace），而.innerHTML赋值则不会。

$('#app').html('')  // 会弹出警告框
$('#app')[0].innerHTML = '' // 不会弹出警告框
      // ↑使用[0]将jquery对象转为dom对象，只有dom对象才有innerHTML方法，jQuery没有。

扩展资料：

html()函数的优点

看看innerHTML属性的缺点，就知道jQuery中html()函数的优点了，它是兼容所有浏览的，不存在html5标签不支持的问题，不存在href,src属性被转换的问题，不存在某些标签设置不了html串的问题，总之就是一句话，用它基本就万事无忧了，至少功能的实现上是这样。

html()函数的缺点

看来jQuery的html()函数似乎完美无限了，其实不然，它的完美只表现它的功能上，它兼容了所有浏览器，包括IE。但偏偏也是IE，尽管兼容了，性能并不乐观，如果使用html()函数设置大数据量的html串的话，那将是场灾难。

在IE下，html()函数的性能到底低到什么程度？电脑的配置为"i5 四核，8G内存，IE9"，测试了用html()函数设置2000行4列的table，其平均耗时达到27秒！具体什么原因导致html()在IE下这么慢，个人粗略看过源码，觉得使用try方式是主要原因之一，有兴趣的同学可以深入研究一下。

以上是“innerHTML与jquery里html()有哪些区别”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


文章名称：innerHTML与jquery里html()有哪些区别
浏览路径：http://pwwzsj.com/article/iigppi.html

其他资讯