jQuery的html()函数和原生innerHTML属性比较

标签: experience javascript html() innerHTML | 发表时间:2014-02-26 22:11 | 作者:世纪之光
出处:http://www.easyui.info

不可否认jQuery是一个很犀利的工具,很容易让人对其产生依赖感。不过好的工具不一定是最适合的解决方案,就跟漂亮的女人并一定适合做你老婆的道理是一样的。本篇文章针对jQuery的html()函数和javascript原生innerHTML属性的优缺点做概要比较。

innerHTML属性的优点

  • innerHTML是w3c制定的行业标准,几乎所有浏览器都做了支持;
  • 作为原生支持,innerHTML在各主流浏览器下的执行效率是很高的;

innerHTML属性的缺点

虽然各个浏览器都实现了innerHTML,但是各个浏览器下innerHTML的行为却有着差异,较为另类的当属IE,IE不同版本表现得也不一样,这样导致innerHTML在IE下,用起来有很多不方便的地方,一个个的说来。

IE6-IE8处理html5标签和属性问题

IE6,IE7,IE8浏览器设置innerHTML属性时会忽略html5属性和标签。IE6-IE8不是不支持html5么?在这些版本IE里设置html5标签有什么意义呢?答案很简单,就算不支持html5的一些效果,至少要让网页的大体布局能够正常显示出来。

解决方案网上有很多资料,也有现成的脚本插件解决这个问题的,主体思路就是利用document.createElement方法创建出html5里的标签来,createElement接口是可以接纳任何标签的,本文不做重复描述了。

IE6-IE7处理标签href和src属性问题

标准模式下, IE6,IE7设置innerHTML属性时会把href,src属性自动转为绝对路径;在IE的怪异模式(Quirks)下,几乎所有IE版本都会不自觉地转换路劲为绝对路径,看借来的代码:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6. <body>  
  7. <div id="test">  
  8.     <a href="#"> test </a>  
  9. </div>  
  10. <div id="result"></div>  
  11. </body>  
  12. </html>  
  1. (function(){   
  2.     var test = document.getElementById('test');   
  3.     alert(test.innerHTML);// will be '<a href="#"> test </a>'   
  4.   
  5.     var result =  document.getElementById('result');   
  6.     result.innerHTML = test.innerHTML;   
  7.     alert(result.innerHTML)// will be '<a href="http://www.xxx.xxx/xxx.html#"> test </a>' in IE6,IE7 or all IE in Quirks model   
  8. })();  

如何解决这个问题呢?在 IE 下使用 getAttribute('href', 2 )方法。 Microsoft 给此方法扩展了第二个参数,可设置为 0、1、2,如果设置为 2 ,则返回属性原始值。

  1. (function(){   
  2.     var test = document.getElementById('test');   
  3.     alert(test.innerHTML);   
  4.     var result =  document.getElementById('result');   
  5.     result.innerHTML = test.innerHTML;   
  6.     if(/*@cc_on!@*/0 ) { //if ie   
  7.         var links1 = test.getElementsByTagName('a');   
  8.         var links2 = result.getElementsByTagName('a');   
  9.         for(var i = 0, len = links1.length; i < len; ++i ) {   
  10.             //利用getAttribute('href', 2)得到的正确值,重新设置href属性   
  11.             links2[i].href = links1[i].getAttribute('href', 2);   
  12.         }   
  13.     }   
  14.     alert(result.innerHTML);   
  15. })();  

问题是可以这样折中的解决,但是也付出了代价,重新设置href的代价,要是html字符串特别复杂,势必也会影响到性能。代码和解决方法均取之于 怿飞博客的这篇文章,在他的这篇文章中还提到了另外一个跟本文无关的bug,有兴趣的可以去看看。

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属性赋值。

不过有时候我们没办法避免对这些只读属性进行赋值,那么该怎么办呢,网上的解决方案也是一搜一大堆,我们来看看其中一种解决方案:

  1. var oTable=document.getElementById("test");   
  2. setTableInnerHTML(oTable,"<tr><td>innerHTML</td></tr>");   
  3.   
  4. function setTableInnerHTML(table, html) {   
  5.     if(navigator && navigator.userAgent.match(/msie/i)){   
  6.         var temp = table.ownerDocument.createElement('div');   
  7.         temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';   
  8.         if(table.tBodies.length == 0){   
  9.             var tbody=document.createElement("tbody");   
  10.             table.appendChild(tbody);   
  11.         }   
  12.         table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);   
  13.     } else {   
  14.         table.innerHTML=html;   
  15.     }   
  16. }   

这段代码是处理table标签的innerHTML属性的,思路是通过创建临时的支持innerHTML的dom对象,先将html串写到临时dom对象的innerHTML属性中,然后再用replaceChild方法将临时DOM对象的对应子节点替换到table节点里面。其它标签思路类似。

不管怎样解决,都是造成相对来说比较冗余的的代码,所以说IE有时候真就是奇葩,不过其寄生在牛逼的windows系统上,没人能耐他何。

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 html 函数] 推荐:

jQuery的html()函数和原生innerHTML属性比较

- - WebUI框架使用参考
不可否认jQuery是一个很犀利的工具,很容易让人对其产生依赖感. 不过好的工具不一定是最适合的解决方案,就跟漂亮的女人并一定适合做你老婆的道理是一样的. 本篇文章针对jQuery的html()函数和javascript原生innerHTML属性的优缺点做概要比较. innerHTML属性的优点. innerHTML是w3c制定的行业标准,几乎所有浏览器都做了支持;.

jQuery操作HTML元素

- - CSDN博客推荐文章
JQuery 获取、设置input的值$("#txtID").val();. JQuery 获取、设置label的值$("#labelID").text(); $("#labelID").html(buildName); . 获取一组radio被选中项的值. 获取select被选中项的文本. select下拉框的第二个元素为当前选中值.

nodejs上HTML分析利器node-jquery

- - 博客园_首页
      首先描述产生这篇随笔的场景:我需要获取项目在jenkins构建的最新Javascript Coverage显示在供管理层次查看的项目情况Report上,但是由于jenkins没有直接的API取得数据所需数据,所以我们只能从自建的容器发布Javascript Coverage数据API,供Report项目使用.

浅谈jquery中,html、val与text三者属性取值的联系与区别

- - CSDN博客Web前端推荐文章
学了一段时间的Jquery了但是我老是分不太清html、val、text这三者之间的属性以及之间的联系与区别,下面我就给大家举例一些简单的来区分jquery这三者之间的关系. jquery中,html、val与text三者属性取值的联系与区别. 首先,html属性中有两个方法,一个有参,一个无参. 无参html():取得第一个匹配元素的html内容.

【外刊IT评论网】HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

- - 外刊IT评论网
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个 自定义data属性,你可以拿它做很多有用的事情.

jquery源码分析之扩展函数 extend, $.extend

- - CSDN博客推荐文章
声明:本文为 斯人原创,全部为作者一一分析得之,有不对的地方望赐教. 本文地址: http://imsiren.com/archives/525. 好久没写jquery源码的内容了. jquery的发展有很大因素是因为它非常易于扩展,究其原因就得益于 extend函数. 该函数是一个扩展函数…说是一个扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了,几乎所有的关于HTML 5 在各种主流浏览器上的安全问题,这些安全问题很有可能将会是黑客攻击你的网上的敲门砖,他们几乎都和Javascript都有关系,你就要好好注意了. IE6,7,8,9,和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中,可以让用户进行XSS(跨站脚本)攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言( 英文:HyperText Markup Language,HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全,超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素(inline). 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:. 一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求,网上找了很多,但是如果批量处理就会出现问题,最后找到了PD4ML,解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹,并且在文件夹中建立pd4fonts.properties ,配置文件中的内容如下.