Dom and innerHTML

在程序中要生成很多的HTML，Dom方式比较自然，但是很满，innerHTML的方式快，但是看起来又不够自然，所以我决定写一个简单的小工具来结合两者的功能。

HElement = Class({
    strs: null,
    
    INSERT_POINT: "__inserPoint__",
    
    initialize: function(tagName, back, attributes, intext){
        attributes = attributes || { };
        tagName = tagName.toLowerCase();
        this.strs = [];
        this.strs.push("<" + tagName + " ");
        for(var attr in attributes){
            this.strs.push(attr + "=\"" + attributes[attr] + "\" ");
        }
        if(!back){
            this.strs.push("/>");
        }else{
            this.strs.push(">");
            if(intext != null){
                 this.strs.push(intext);
            }
            this.strs.push("_");
            this.strs.push("</" + tagName + ">");
        }
    },
    
    insert: function(e){
        var strs;
        if(e.CLASS_NAME = "OpenLayers.HElement"){
            strs = e.strs;
        }else if(e instanceof Array){
            strs = e;
        }else{
            strs = [e];
        };
        
        var i;
        for(i = 0; i < this.strs.length; i++){
            if(this.strs[i] == "_"){
                break;
            }
        }
        
        var tmp = this.strs.splice(i, this.strs.length - i);
        this.strs = this.strs.concat(this.removePoint(strs)).concat(tmp);
    },
    
    inserts: function(e){
        for(var i = 0; i < e.length; i++){
            this.insert(e[i]);
        }
    },
    
    removePoint: function(strs){
        if(strs == null){
            strs = this.strs; 
        }
        
        for(i = 0; i < strs.length; i++){
            if(strs[i] == "_"){
                break;
            }
        }
        if(i != strs.length){
            strs.splice(i, 1);
       }
        return strs;
    },
    
    toString: function(){
        this.removePoint();        
        return this.strs.join("");
    }
});

开始在FireFox下面运行良好，可视到了IE却不行，主要是下面这一句
var tmp = this.strs.splice(i, this.strs.length - i);
开始是这么写的var tmp = this.strs.splice(i);

IE和FF的一个小差别，呵呵。

使用起来大概是这个样子的

var tr = new HElement("tr", true);
            var td0 = new HElement("td", true, {style: "background-color: #FFFFFF;"}, attr);
            var input = new HElement("input", false, {type: "text", value: attributes[attr], id: attr});
            var td1 = new HElement("td", true, {style: "background-color: #FFFFFF;"});
            td1.insert(input);
            tr.inserts([td0, td1]);
            table.insert(tr);  

另外Class的语法是用的Prototype的功能，直接copy可能不一定能用。