innerHTML与jquery里html()的区别是什么
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了innerHTML与jquery里html()的区别是什么,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2957字,纯文字阅读大概需要5分钟。
内容图文
![innerHTML与jquery里html()的区别是什么](/upload/InfoBanner/zyjiaocheng/417/b9392337651d4c7d8f87503d4f7a50de.jpg)
区别:1、html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行,不可以赋值,赋值的话就脚本报错;2、html()设置的script脚本会执行,innerHTML设置的script脚本不会执行。
推荐教程:jquery视频教程
InnerHtml() 与html( )的区别
1、html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
innerHTML 是从对象的起始位置到终止位置的全部内容,包括Html标签
我原本一直以为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能正确显示了,没任何问题。
后来查阅资料才知道:
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('<script>alert(1)</script>') // 会弹出警告框 $('#app')[0].innerHTML = '<script>alert(1)</script>' // 不会弹出警告框 // ↑使用[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()的区别是什么的详细内容。
本文系统来源:https://www.php.cn/website-design-ask-466759.html内容总结
以上是互联网集市为您收集整理的innerHTML与jquery里html()的区别是什么全部内容,希望文章能够帮你解决innerHTML与jquery里html()的区别是什么所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。