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

转自：/article/3928845.html

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

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

示例：

Js代码



createElement('div');//这个当然是调用内置方法了

createElement('<tbody><tr><td></td></tr><tr></tbody>');

createElement('<img src="***" name="***" />');

createElement('<br>');

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


源码实现：

Js代码



/**

* @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
很不错