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

zbm2001

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);}