jquery innerHTML的缺陷

对于节点的创建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’]的标签就会自动包装一层节点,这样达到支持。

时间: 2024-08-02 15:40:33

jquery innerHTML的缺陷的相关文章

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&g

innerHTML=

用js在清空一个DOM元素时会发生什么 我的浏览器环境是Chrome 23,Firefox 17,IE9 我的作法,在body中创建1000个p标签  代码如下 复制代码 for(var i=0;i<10000;i++){ var p=document.createElement("p"); p.innerHTML="1"; document.body.appendChild(p); } var p=document.getElementsByTagName(

跟我学习javascript的闭包_javascript技巧

JavaScript 闭包究竟是什么? 用JavaScript一年多了,闭包总是让人二丈和尚摸不着头脑.陆陆续续接触了一些闭包的知识,也犯过几次因为不理解闭包导致的错误,一年多了资料也看了一些,但还是不是非常明白,最近偶然看了一下 jQuery基础教程 的附录,发现附录A对JavaScript的闭包的介绍简单易懂,于是借花献佛总结一下. 1.定义 闭包:是指有权访问另外一个函数作用域中的变量的函数.创建闭包的常见方式就是在一个函数内部创建另外一个函数. 直接上例子 function a(){ v

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes_jquery

DOM: 复制代码 代码如下: function DisplayTextBoxValue(){ var element = document.getElementById('textbox'); // set the attribute on the DOM Element by hand - will update the innerHTML element.setAttribute('value', element.value); alert(document.getElementById(

放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解_jquery

在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模版,最终通过一定的方法输出给用户(innerHTML.documentWrite等方式). 缺点 1)拼接字符串的过程容易出错,常常忘了'/">等匹配的符号. 2)修改前台模版的同时容易遗忘同步更改动态生成的模版. 3)拼接字符串不直观和美观,不利于查找错误,例如:数据中如果存在HTML内容,

jQuery中的编程范式详解_jquery

本文详细分析了jQuery中的编程范式.分享给大家供大家参考.具体如下: 浏览器前端编程的面貌自2005年以来已经发生了深刻的变化,这并不简单的意味着出现了大量功能丰富的基础库,使得我们可以更加方便的编写业务代码,更重要的是我们看待前端技术的观念发生了重大转变,明确意识到了如何以前端特有的方式释放程序员的生产力.这里将结合jQuery源码的实现原理,对javascript中涌现出的编程范式和常用技巧作一简单介绍.   1. AJAX: 状态驻留,异步更新 首先来看一点历史. A. 1995年Ne

任何使用jQuery Mobile网站中都存在一个尚未修复的XSS漏洞

概述 根据国外媒体的最新报道,谷歌公司的安全工程师Eduardo Vela在jQuery Mobile框架中发现了一个安全漏洞,这个漏洞将会让所有使用了jQuery Mobile的网站暴露于跨站脚本攻击风险之下. 安全客小百科:jQuery Mobile jQuery Mobile项目(jQuery框架中的一个组件)是一个基于HTML5的开发框架,在它的帮助下,开发者可以设计出能够适配目前主流移动设备和桌面系统的响应式Web站点以及应用程序.实际上,jQuery Mobile不仅可以为主流移动平

自己动手丰衣足食之征服jQuery插件编写

原文地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.

innerhtml-无法设置属性“innerHTML”的值: 对象为 null 或未定义

问题描述 无法设置属性"innerHTML"的值: 对象为 null 或未定义 function getdbxx(posturl, paramstr, spanid, inputid) { $.ajax({ type : "post", url : posturl, dataType : 'json', data : 'portletConfigJson=${portletConfigJson}&'+paramstr, success : function(