innerHTML与jquery里html()的区别是什么

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

innerHTML与jquery里html()的区别是什么

推荐教程: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='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('alert(1)')  // 会弹出警告框$('#app')[0].innerHTML = 'alert(1)' // 不会弹出警告框      // ↑使用[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方式是主要原因之一,有兴趣的同学可以深入研究一下。

更多编程相关知识,请访问:jquery视频教程!!

以上就是innerHTML与jquery里html()的区别是什么的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3129154.html

(0)
上一篇 2025年3月30日 05:32:17
下一篇 2025年3月6日 15:15:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • W3C公布最新的HTML5标准草案_html5教程技巧

      周二,W3C机构正式对外公布了互联网网页代码新标准HTML5的草案。预计正式版的标准将会在两年以后形成。   HTML可以说是互联网信息组织的一个基石。据悉,这是自从1997年以来对于HTML标准最为重大的一次升级。 之前的标准是HTM…

    编程技术 2025年3月29日
    100
  • HTML5中的新元素介绍_html5教程技巧

    超文本标记语言(HTML)5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的…

    编程技术 2025年3月29日
    100
  • X/HTML5 和 XHTML2_html5教程技巧

    在了解了XHTML 2的进展之后,我们再来看看X/HTML 5 的进展。X/HTML 5酷在什么地方章节元素的构想 X/HTML 5引入新的元素用于把Web页面分成若干章节。这些组成部分有助于搜索引擎和辅助工具更好地理解页面内容。使用这些新…

    编程技术 2025年3月29日
    100
  • 自定义html标记替换html5新增元素_html5教程技巧

    在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。代码如下:

    编程技术 2025年3月29日
    100
  • HTML5的结构和语义(1):前言_html5教程技巧

      超文本标记语言(HTML)5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。…

    编程技术 2025年3月29日
    100
  • H5你真的了解吗?(绝对干货)

         h5广告,包括广告的设计流程,究竟有什么讲究,和阶段。为了能帮助更多的人了解h5广告,我专门做了一个讲义。同时,也让我意外的收到了非常好反馈和认!这是对我的极大鼓励!我的讲义内容仍然还有不少不完善和有待系统的内容。但是,我相信你在…

    2025年3月29日 编程技术
    100
  • 从登录框看前端

      我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。   在很多人眼里,前端就是 DIV+CS…

    编程技术 2025年3月29日
    100
  • React Native第一课

         前言   本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客。   阅读本文…

    2025年3月29日 编程技术
    100
  • HTML5新特性之WebNotifications

      由于平时忙于工作,已经有很长时间没有更新博客了,偶尔会进来看一眼,发现有很多朋友在下面留言,我很庆幸当时能写下这些有价值的文章,直到现在还能够帮助这么多朋友解决Android方面的一些问题。     最近研究了一下HTML5方面的一些新…

    2025年3月29日 编程技术
    100
  • HTML5 SVG响应式路径过渡动画幻灯片特效

    简要教程  这是一款基于HTML5 SVG制作的路径过渡动画幻灯片特效。该幻灯片特效使用SVG路径来剪裁幻灯片中的图片,制作出幻灯片切换时不规则的图形变换效果。 查看演示     查看演示  使用方法  HTML结构  该幻灯片特效的HTM…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论