自定义createElement——根据html字符串创建元素
zCool工具箱新增工具——createElement方法。用法：根据（HTML）字符串参数创建一个元素。
示例：createElement('div');//这个当然是调用内置方法了createElement('<tbody><tr><td></td></tr><tr></tbody>');createElement('<img src="***" name="***" />');createElement('<br>');
你可以回想一下，特别是用insertRow/insertCell这些传统方法为表格创建添加元素有多痛苦http://www.agoit.com/images/smiles/icon_eek.gif
源码实现：/** * @author zbm2001 宝儿 */createElement = function(sHtml){ // 创建一个可复用的包装元素 var recycled = document.createElement('div'), // 创建标签简易匹配 reg = /^<(+)(?=\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; // 若无，向包装元素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); element.innerHTML = sHtml; // 根据迭代层次截取被包装的子元素 do { element = element.removeChild(element.firstChild); } while (--deep > -1); // 最终返回需要创建的元素 return element; }// 执行方法并返回结果 return createElement(sHtml);}
页:
[1]