自定义createElement——根据html字符串创建元素

zCool工具箱新增工具——createElement方法。

用法：根据（HTML）字符串参数创建一个元素。

示例：

createElement('div');//这个当然是调用内置方法了
createElement('<tbody><tr><td></td></tr><tr></tbody>');
createElement('<img src="***" name="***" />');
createElement('<br>');

你可以回想一下，特别是用insertRow/insertCell这些传统方法为表格创建添加元素有多痛苦

源码实现：

/**
 * @author zbm2001 宝儿
 */
createElement = function(sHtml){
    // 创建一个可复用的包装元素
    var recycled = document.createElement('div'),
    // 创建标签简易匹配
    reg = /^<([a-zA-Z]+)(?=\s|\/>|>)[\s\S]*>$/,
    // 某些元素HTML标签必须插入特定的父标签内，才能产生合法元素
    // 另规避：ie7-某些元素innerHTML只读
    // 创建这些需要包装的父标签hash
    hash = {
        'colgroup': 'table',
        'col': 'colgroup',
        'thead': 'table',
        'tfoot': 'table',
        'tbody': 'table',
        'tr': 'tbody',
        'th': 'tr',
        'td': 'tr',
        'optgroup': 'select',
        'option': 'optgroup',
        'legend': 'fieldset'
    };
    // 闭包重载方法（预定义变量避免重复创建，调用执行更快，成员私有化）
    createElement = function(sHtml){
        // 若不包含标签，调用内置方法创建并返回元素
        if (!reg.test(sHtml)) {
            return document.createElement(sHtml);
        }
        // hash中是否包含匹配的标签名
        var tagName = hash[RegExp.$1.toLowerCase()];
        // 若无，向包装元素innerHTML，创建/截取并返回元素
        if (!tagName) {
            recycled.innerHTML = sHtml;
            return recycled.removeChild(recycled.firstChild);
        }
        // 若匹配hash标签，迭代包装父标签，并保存迭代层次
        var deep = 0, element = recycled;
        do {
            sHtml = '<' + tagName + '>' + sHtml + '</' + tagName + '>';
            deep++;
        }
        while (tagName = hash[tagName]);
        element.innerHTML = sHtml;
        // 根据迭代层次截取被包装的子元素
        do {
            element = element.removeChild(element.firstChild);
        }
        while (--deep > -1);
        // 最终返回需要创建的元素
        return element;
    }
	// 执行方法并返回结果
    return createElement(sHtml);
}

评论

3 楼 zbm2001 2009-11-05  

楼上提醒的没错，代码片段是从脚本库里截取的方法成员，
想修改成可以独立调用的方法，刚刚编辑漏了，已修改。

2 楼 lifesinger 2009-11-05  

代码组织上，好像少了一句 this.createElement = createElement:
<code>
    createElement: function(sHtml) {
        // ...
        var createElement = function(sHtml) {
            // ...
        };
        this.createElement = createElement;
        return createElement(sHtml);
    }
</code>

1 楼 lifesinger 2009-11-05  

很不错