javascript 动态插入技术

作者：司徒正美来源：Ruby's Louvre 时间：2009-12-14 20:50:00　

最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉，见下面运行框的结果：

<!doctype html><html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8" /> <title> IE的innerHTML By 司徒正美 </title> <script type="text/javascript"> window.onload = function() { var div = document.createElement("div"); div.innerHTML = " <td> <b>司徒</b>正美 </td> " alert("|" + div.innerHTML + "|"); var c = div.childNodes; alert("生成的节点个数 " + c.length); for(var i=0,n=c.length;i<n;i++){ alert(c[i].nodeType); if(c[i].nodeType === 1){ alert(":: "+c[i].childNodes.length); } } } </script> </head> <body> <p id="p"> </p> </body></html>

另一个可恶的地方是，在IE中以下元素的innerHTML是只读的：col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr。为了收拾它们，Ext特意弄了个insertIntoTable。insertIntoTable就是利用DOM的insertBefore与appendChild来添加，情况基本同jQuery。不过jQuery是完全依赖这两个方法，Ext还使用了insertAdjacentHTML。为了提高效率，所有类库都不约而同地使用了文档碎片。基本流程都是通过div.innerHTML提取出节点，然后转移到文档碎片上，然后用insertBefore与appendChild插入节点。对于火狐，Ext还使用了createContextualFragment解析文本，直接插入其目标位置上。显然，Ext的比jQuery是快许多的。不过jQuery的插入的不单是HTML片断，还有各种节点与jQuery对象。下面重温一下jQuery的工作流程吧。

真是复杂的让人掉眼泪！不过jQuery的实现并不太高明，它把插入的东西统统用clean转换为节点集合，再把它们放到一个文档碎片中，然后用appendChild与insertBefore插入它们。在除了火狐外，其他浏览器都支持insertAdjactentXXX家族的今日，应该好好利用这些原生API。

2 下一页

标签：动态,innerHTML,技术,JavaScript

投稿

javascript 动态插入技术

猜你喜欢

asp数组去重复和数组排序

sqlserver关于分页存储过程的优化【让数据库按我们的意思执行查询计划】

玩转MySQL中的外键约束之PHP篇

网页设计进阶之六-- 守住那些不能丢的东西

HTML在线编辑器的原理分析（整理）

表单设计中的网页视觉体验

Window.ShowModalDialog使用手册

解析CSS列表样式属性list-style

弹性+固宽布局

MySQL 函数过程递归

prototype.js1.4版开发者手册

天气预报调用代码

ASP平台如何打造金牌英文网站

Oracle 子程序参数模式,IN,OUT,NOCOPY

firefox通过XUL实现text-overflow:ellipsis的效果

用ASP生成XBM数字图片验证码

按钮表状态还是表动作？

10分钟学会Google Map API （二）

asp如何用HtmlEncode来显示Unicode编码？

asp实现新评论自动发短信提示的代码