在2008年的最后一天,在此祝愿大家元旦快乐!!! 郑重声明:此问题根本不是问题,现在看来就是本人知识匮乏,庸人自扰,望广大朋友勿喷!! 细心发现问题,耐心解决问题,信心面对问题. 作者:白某人 长话短说:”服务员,上代码....” 测试代码: this is div1 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]以下是在IE下的测试.我所期望的结果是(旁白:我已经开始犯错了): <div id="div88">this is div88</div> <div id="div2">this is div2</div> <div id="div3">this is div3</div> 实际结果: <div id="div88">this is div88</div> 问题: Div2,div3 丢了? 发现问题怎么办?看代码. Template.js line:197 (Extjs ver 2.2) append : function(el, values, returnElement){ return this.doInsert('beforeEnd', el, values, returnElement); } 在看 line201: doInsert : function(where, el, values, returnEl){ el = Ext.getDom(el); var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values)); return returnEl ? Ext.get(newNode, true) : newNode; } 在在看:DomHelper.js line:267 insertHtml : function(where, el, html){ where = where.toLowerCase(); if(el.insertAdjacentHTML){ if(tableRe.test(el.tagName)){ var rs; if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){ return rs; } } switch(where){ case "beforebegin": el.insertAdjacentHTML('BeforeBegin', html); return el.previousSibling; case "afterbegin": el.insertAdjacentHTML('AfterBegin', html); return el.firstChild; case "beforeend": el.insertAdjacentHTML('BeforeEnd', html); return el.lastChild; case "afterend": el.insertAdjacentHTML('AfterEnd', html); return el.nextSibling; } throw 'Illegal insertion point -> "' + where + '"'; } //////后面省略 } 原来还是用的insertAdjacentHTML方法,为什么会有问题呢? 输出中间代码: var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>'); tpl.append('div1',{id:'2'}); tpl.insertAfter('div2',{id:'3'}); $("result-area").innerText = Ext.getDom("div1").innerHTML; //......... 结果如下: this is div1 <DIV id=div2>this is div2</DIV> <DIV id=div3>this is div3</DIV> ?????? 为什么会这样? “this is div1”两边的<div>标签呢? 在测试: var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>'); tpl.append('div1',{id:'2'}); tpl.insertAfter('div2',{id:'3'}); $("result-area").innerText = Ext.getDom("div1").outerHTML; //......... 结果如下: <DIV id=div1> this is div1 <DIV id=div2>this is div2</DIV> <DIV id=div3>this is div3</DIV> </DIV> (旁白:本来到这就已经能发现问题所在了,但执迷不悟,继续犯错) 原来它把div2,div3插到div1的value/text 后边了.所以运行tpl.overwrite('div1',{id:'88'});后div2,div3没了. 在此附上tpl.overwrite源码(innerHTML直接赋值): overwrite : function(el, values, returnElement){ el = Ext.getDom(el); el.innerHTML = this.applyTemplate(values); return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; } 问题知道了,可怎么办呢,改Ext源码?

　　推荐阅读

　　走出JavaScript初学困境—js初学

从开始接触JS这东西有一年时间了，心头总是有一些说不出来的苦闷。在论坛里也常常有人这么说。那么苦在何处呢？总是感觉学的不深入，一些简单的东西可以做但也是不能得心应手。能不能把这种苦再说的具体点儿呢？都>>>详细阅读

本文标题：javascript 一段代码引发的思考第1/2页

地址：http://www.17bianji.com/kaifa2/JS/29054.html

 1/2    1