1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jquery innerHTML的缺陷

作者:用户 来源:互联网 时间:2016-08-03 14:29:33

jquery节点元素innerhtml作用buildfragmentcreateElement

jquery innerHTML的缺陷 - 摘要: 本文讲的是jquery innerHTML的缺陷, 对于节点的创建innerHTML是一个很高效的接口。jQuery在节点操作上使用了innerHTML,创建效率上来说至少比createElement快了2

对于节点的创建innerHTML是一个很高效的接口。jQuery在节点操作上使用了innerHTML,创建效率上来说至少比createElement快了2-10倍不等,而且还能一次性生成一堆的节点,但是随之而来就有一些兼容性问题。
我总结了有以下几点,当然兼容上也结合了jQuery的解决方案。
  IE会对用户字符串进行trimLeft操作,用户可能的本意就是需要空白   IE8有些元素innerHTML是只读   IE会忽略开头的无作用域元素   大多情况下不执行script脚本,当然如果支持defer的IE9之前的浏览器除外   一些标签不能作为div的子元素,如tr,tb, col等
 
jQuery的节点操作最终是需要转化成文档碎片也就是要通过buildFragment()方法处理的,所以innerHTML兼容的修复也自然在buildFragment方法中。 我们弄清了缘由再去分析,其实整个修正的代码就很简单了。
  1:首先无作用域的问题,通过文档碎片创建一个div的包含容器,让所有的元素都被div元素给包含起来,包括script,style等无作用域的元素,很好的解决了 tmp = tmp fragment.appendChild(context.createElement("div")); tmp.innerHTML = elem
  2:针对不支持innerHTML属性的元素,给单独提出来,通过正则抽出来这个节点名字去处理 wrapMap = {      tr: [2, "<table><tbody>", "</tbody></table>"], } tag = /<([\w:]+)/.exec(‘<tr>爱思资源网</tr>’) wrap = wrapMap[tag] wrapMap._default; tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2]; 如果遇到wrapMap[‘tr’]的标签就会自动包装一层节点,这样达到支持。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery , 节点 , 元素 , innerhtml , 作用 , buildfragment createElement jquery的innerhtml、jquery中的innerhtml、jquery innerhtml、jquery innerhtml用法、jquery div innerhtml,以便于您获取更多的相关知识。

js jquery-JS/jQuery实现默认显示部分文字点击按钮显示全部内容

...ction show(){ var box = document.getElementById("box"); var text = box.innerHTML; var newBox = document.createElement("div"); var btn = document.createElement("a"); newBox.innerHTML = text.substring(0,200); btn.innerHTML = text.length &gt; 200 ? "...显示全部" : ""; btn.href = "###"...

jQuery(1.6.3) 中css方法对浮动的实现缺陷分析_jquery

jQuery的css方法统一了两种写法,直接使用float属性即可,如下css方法中传参数“float”即可以设置也可以获取元素的float。 复制代码 代码如下: float div $('#d1').css('float', 'right'); var str = $('#d1').css('float'); alert(str); 但jQuery非要自...

PHP防御XSS攻击的终极解决方案

...ontent(Firefox),也就是jQuery的text()来输出文本内容2.必须要用innerHTML等等函数,则需要做类似php的htmlspecialchars的过滤(参照@eechen的答案) 其它的通用的补充性防御手段 1.在输出html时,加上Content Security Policy的Http Header(作用:可...

js在IE与firefox的差异集锦

1.firefox不能对innerText支持。firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了。如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替。 2.禁止选取网页内容:在...

驱散前端安全梦魇——DOMXSS典型场景分析与修复指南

...执行,就不得不用到JavaScript“三姐妹”,她们分别是:innerHTML、document.write、eval。“三姐妹”具有强大的功能的同时,不经意间也成了DOM-XSS攻击的导火索。因为JavaScript取值的来源纷繁复杂,如:Parameter、Cookies、Referer、Window nam...

前三篇
后三篇