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方式是主要原因之一,有兴趣的同学可以深入研究一下。
InnerHtml() 与html( )的区别的更多相关文章
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别
清空元素html("").innerHTML="" 与 empty()的区别 一.清空元素的区别 1.错误做法一: $(" ...
- innerHTML和innerText的区别,以及select元素中怎么取出被选中的option。
一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML和outerHTML的区别
一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子: &l ...
- innerHTML和createTextNode的区别
innerHTML的用法 tablerowObject.innerHTML createTextNode的用法 createTextNode(data) 返回新创建的 Text 节点,表示指定的 da ...
- innerHTML和innerText的区别
以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...
- innerHTML 与 innerText 的区别
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...
- innerHTML,innerText,outHTML,outText区别
<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;& ...
- js第一天 innerHTML和value 的区别
innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容:如:<div id="aa">这是内容</div> ,我们可以通过 document ...
随机推荐
- [BZOJ4551][TJOI2016&&HEOI2016]树(并查集)
4551: [Tjoi2016&Heoi2016]树 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1746 Solved: 800[Sub ...
- CodeForces - 1017D The Wu
题面在这里! 比较显而易见的暴力,O(2^(2n) + 2^n * 100) 就可以直接做了 #include<bits/stdc++.h> #define ll long long us ...
- SpringBoot静态资源访问+拦截器+Thymeleaf模板引擎实现简单登陆
在此记录一下这十几天的学习情况,卡在模板引擎这里已经是四天了. 对Springboot的配置有一个比较深刻的认识,在此和大家分享一下初学者入门Spring Boot的注意事项,如果是初学SpringB ...
- bzoj 1101
其实这个用的是Mobius反演的第二种形式 F(d) = (n div d) * (m div d) f(d) = [ gcd(i,j)=d ] (i in [1,a], j in [1,b]) /* ...
- 2015 UESTC 数据结构专题C题 秋实大哥与快餐店 字典树
C - 秋实大哥与快餐店 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/59 ...
- 获取android-5.0.2_r1代码6.7G
获取 android-5.0.2_r1 源代码的坎坷路: 服务器相关 ====== * 国外服务器直接拉取,我一共有多个国外服务器,在获取android代码时下载速度都能到10MB/s的下载速度甚至更 ...
- [c#基础]泛型集合的自定义类型排序
引用 最近总有种感觉,自己复习的进度总被项目中的问题给耽搁了,项目中遇到的问题,不总结又不行,只能将复习基础方面的东西放后再放后.一直没研究过太深奥的东西,过去一年一直在基础上打转,写代码,反编译,不 ...
- 计蒜之道 初赛 第三场 题解 Manacher o(n)求最长公共回文串 线段树
腾讯手机地图 腾讯手机地图的定位功能用到了用户手机的多种信号,这当中有的信号的作用范围近.有的信号作用的范围则远一些.有的信号相对于用户在不同的方位强度是不同的,有的则是在不论什么一个方向上信号强度都 ...
- Java自定义Exception
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- unity 3D + Google Play In-app Billing (IAB)(转) 热度 3
最近由于工作需要,研究unity如何接入Google Play以实现游戏内购买.目前IAB的实现,prime31做的插件比较好,各平台的IAB均有,但费用相对过高(几乎都是70刀左右,可怜穷小子).在 ...