Juqery Html等方法的Bug解决方法_jquery_脚本之家

这几天在做动态加载图片热区,我用Ajax获取到了area标签,这里有多个area,在IE8和FF里测试正常,可一到IE7,和IE6里面就显示不正常了。

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

后来发现jquery中的append将HTML加入到标签里的方法都不好用,都会出现下面的问题

先给出我的获取热区的代码

下面是热的HTML复制代码 代码如下:
图片 1
width=”930px” usemap=”#Map” border=”0″ />

如下是结果:

1.我要的正确代码