zoukankan      html  css  js  c++  java
  • InnerHtml() 与html( )的区别

    InnerHtml() 与html( )的区别

    在一个 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能正确显示了,没任何问题。
    后来查阅资料才知道,原来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。

     

    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父元素(假设是div)的innerHTML属性赋值。

     

     

    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方式是主要原因之一,有兴趣的同学可以深入研究一下。

  • 相关阅读:
    关于32位操作系统和64位操作系统对InstallShield打包的影响
    NEWS: Symantec宣布Wise Package Studio将终止
    InstallShield 2012新功能试用(2) 调用MsiGetProperty等MSI API发生变化
    Basic INFO 在命令行Build InstallShield安装包工程获得压缩安装包
    NEWS InstallShield 2012 Service Pack 1发布
    Basic INFO InstallShield Basic MSI工程中如何在SetupCompleteSuccess界面中启动Readme
    Basic INFO InstallShield的脚本编辑器中如何显示代码行号
    Basic INFO 关于在InstallShield制作的安装包界面中删除InstallShield文字的厂商回复
    Basic INFO InstallShield工程中如何让产品的快捷方式名称始终与产品名保持一致
    Basic INFO: 创建隐藏文件夹
  • 原文地址:https://www.cnblogs.com/lovebing/p/6609903.html
Copyright © 2011-2022 走看看