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

Biegral 2018/12/7 1:39:50 4523

转自：http://zbm2001.iteye.com/blog/510627

zCool工具箱新增工具——createElement方法。 
用法：根据（HTML）字符串参数创建一个元素。 
示例：
Js代码  收藏代码
  1. createElement('div');//这个当然是调用内置方法了  
  2. createElement('<tbody><tr><td></td></tr><tr></tbody>');  
  3. createElement('<img src="***" name="***" />');  
  4. createElement('<br>');  

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

源码实现：
Js代码  收藏代码
  1. /** 
  2.  * @author zbm2001 宝儿 
  3.  */  
  4. createElement = function(sHtml){  
  5.     // 创建一个可复用的包装元素  
  6.     var recycled = document.createElement('div'),  
  7.     // 创建标签简易匹配  
  8.     reg = /^<([a-zA-Z]+)(?=\s|\/>|>)[\s\S]*>$/,  
  9.     // 某些元素HTML标签必须插入特定的父标签内，才能产生合法元素  
  10.     // 另规避：ie7-某些元素innerHTML只读  
  11.     // 创建这些需要包装的父标签hash  
  12.     hash = {  
  13.         'colgroup': 'table',  
  14.         'col': 'colgroup',  
  15.         'thead': 'table',  
  16.         'tfoot': 'table',  
  17.         'tbody': 'table',  
  18.         'tr': 'tbody',  
  19.         'th': 'tr',  
  20.         'td': 'tr',  
  21.         'optgroup': 'select',  
  22.         'option': 'optgroup',  
  23.         'legend': 'fieldset'  
  24.     };  
  25.     // 闭包重载方法（预定义变量避免重复创建，调用执行更快，成员私有化）  
  26.     createElement = function(sHtml){  
  27.         // 若不包含标签，调用内置方法创建并返回元素  
  28.         if (!reg.test(sHtml)) {  
  29.             return document.createElement(sHtml);  
  30.         }  
  31.         // hash中是否包含匹配的标签名  
  32.         var tagName = hash[RegExp.$1.toLowerCase()];  
  33.         // 若无，向包装元素innerHTML，创建/截取并返回元素  
  34.         if (!tagName) {  
  35.             recycled.innerHTML = sHtml;  
  36.             return recycled.removeChild(recycled.firstChild);  
  37.         }  
  38.         // 若匹配hash标签，迭代包装父标签，并保存迭代层次  
  39.         var deep = 0, element = recycled;  
  40.         do {  
  41.             sHtml = '<' + tagName + '>' + sHtml + '</' + tagName + '>';  
  42.             deep++;  
  43.         }  
  44.         while (tagName = hash[tagName]);  
  45.         element.innerHTML = sHtml;  
  46.         // 根据迭代层次截取被包装的子元素  
  47.         do {  
  48.             element = element.removeChild(element.firstChild);  
  49.         }  
  50.         while (--deep > -1);  
  51.         // 最终返回需要创建的元素  
  52.         return element;  
  53.     }  
  54.     // 执行方法并返回结果  
  55.     return createElement(sHtml);  
  56. }  

评论
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  
很不错


本文转载:CSDN博客

阅读排行

分类

归档