javascript 动态插入技术.docx

javascript 动态插入技术.docx

《javascript 动态插入技术.docx》由会员分享，可在线阅读，更多相关《javascript 动态插入技术.docx（15页珍藏版）》请在冰点文库上搜索。

javascript动态插入技术

　最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。

这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。

首先innerHTML会把里面的某些位置的空白去掉，见下面运行框的结果：

（复制运行）

doctypehtml>

window.onload=function（）{

vardiv=document.createElement（"div"）;

div.innerHTML="司徒正美"

alert（"|"+div.innerHTML+"|"）;

varc=div.childNodes;

alert（"生成的节点个数"+c.length）;

for（vari=0,n=c.length;i

alert（c[i].nodeType）;

if（c[i].nodeType===1）{

alert（":

:

"+c[i].childNodes.length）;

}

}

}

　　另一个可恶的地方是，在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的工作流程吧。

append:

function（）{

//传入arguments对象，true为要对表格进行特殊处理，回调函数

returnthis.domManip（arguments,true,function（elem）{

if（this.nodeType==1）

this.appendChild（elem）;

}）;

},

domManip:

function（args,table,callback）{

if（this[0]）{//如果存在元素节点

varfragment=（this[0].ownerDocument||this[0]）.createDocumentFragment（）,

//注意这里是传入三个参数

scripts=jQuery.clean（args,（this[0].ownerDocument||this[0]）,fragment）,

first=fragment.firstChild;

if（first）

for（vari=0,l=this.length;i

callback.call（root（this[i],first）,this.length>1||i>0?

fragment.cloneNode（true）:

fragment）;

if（scripts）

jQuery.each（scripts,evalScript）;

}

returnthis;

functionroot（elem,cur）{

returntable&&jQuery.nodeName（elem,"table"）&&jQuery.nodeName（cur,"tr"）?

（elem.getElementsByTagName（"tbody"）[0]||

elem.appendChild（elem.ownerDocument.createElement（"tbody"）））:

elem;

}

}

//elems为arguments对象，context为document对象，fragment为空的文档碎片

clean:

function（elems,context,fragment）{

context=context||document;

//!

context.createElementfailsinIEwithanerrorbutreturnstypeof'object'

if（typeofcontext.createElement==="undefined"）

//确保context为文档对象

context=context.ownerDocument||context[0]&&context[0].ownerDocument||document;

//Ifasinglestringispassedinandit'sasingletag

//justdoacreateElementandskiptherest

//如果文档对象里面只有一个标签，如