读Ext之十二（在各个位置安插元素）

2012-11-07

读Ext之十二（在各个位置插入元素）IE 除了发明 innerHTML这个快捷创建DOM元素(及其属性等)外，还发明了inser

读Ext之十二（在各个位置插入元素）

IE 除了发明 innerHTML这个快捷创建DOM元素(及其属性等)外，还发明了insertAdjacentHTML /insertAdjacentText 方法。

它们首次在IE4中引入，随后其它浏览器如Opera、Safari、Chrome相继实现了它们。唯独Firefox没有实现。

鉴于insertAdjacentHTML被众多浏览器实现，html5已经将其列纳入，insertAdjacentText则没那么幸运。

Firefox中使用另外一些方式实现了相同功能。在这篇 ? 中通过扩展HTMLElement.prototype为Firefox实现了与IE相同的接口方法。

在Ext.DomHelper中，它没有去扩展HTMLElement.prototype（部分人会认为是污染了原生的HTMLElement，暂且放一边）。而是提供了以下四个方法

insertBefore? 在元素前面插入新的元素
insertAfter?? 在元素后面插入新的元素
insertFirst?? 在元素内部的第一个位置插入新的元素
append??????? 在元素内部最后一个位置插入新的元素

在上一篇中提到了，这四个方法都调用私有的doInsert函数，而doInsert函数内部调用的是Ext.DomHelper的insertHtml方法。
可回到上一篇看看那个截图便一目了然。因此insertHtml方法是实现各种方式插入元素的核心方法，以上是提供给客户端程序员的四个接口方法。

Ext.applyIf(String, {    format : function(format){        var args = Ext.toArray(arguments, 1);        return format.replace(/\{(\d+)\}/g, function(m, i){            return args[i];        });    }});

这是一个bug ，另见 trim的各种实现。

1 楼 pfans 2011-01-13   希望楼主继续，加油！ 2 楼 cxl2086 2011-03-31   楼主，在ext 2.2 版本中，有如下代码，string已经有了trim方法：

String.prototype.trim = function(){
    var re = /^\s+|\s+$/g;
    return function(){ return this.replace(re, ""); };
}();

热点排行

Web前端

读Ext之十二（在各个位置安插元素）