简化document.createElement("div")动态生成层方法 (转）

我们在WEB开发时，很多时候往往需要我们 JavaScript 来动态建立 html 元素，动态的设置相关的属性。比方说我们想要建立一個 div 层，则可以使用以下代码实现。
一.直接建立

function  Button1_onclick()  // 直接采用代码建立一个DIV
{
     var  newElement  =  document.createElement('div'); 
     var  newText  =  document.createTextNode('这是新建立 div 中的文字。'); 
    document.body.appendChild(newElement);  // 漏了这一句，否则行不通 
    newElement.id  =  'newDiv'; 
    newElement.className  =  'newDivClass'; 
    newElement.setAttribute('name ','newDivName'); 
    newElement.style.width  =  '300px'; 
    newElement.style.height  =  '200px'; 
    newElement.style.margin  =  ' 0  auto'; 
    newElement.style.border  =  '1px solid #DDD'; 
    newElement.appendChild(newText);  
}

二.把建立新对象写成一个通用方法，增加其通用性

createEl  =   function (t, a, y, x) // 编写建立一个新对象的通用方法
{ 
     var  e  =  document.createElement(t); 
    document.body.appendChild(e);  // 漏了这一句，否则行不通 
     if  (a)  { 
         for  ( var  k  in  a)  { 
             if  (k  ==  'class') e.className  =  a[k]; 
             else   if  (k  ==  'id') e.id  =  a[k]; 
     else  e.setAttribute(k, a[k]); 
    }  
    }  
     if  (y)  {  for  ( var  k  in  y) e.style[k]  =  y[k]; }  
     if  (x)  { e.appendChild(document.createTextNode(x)); }  
     return  e; 
}   

// 再通过以下方法来进行调用建立一个新层
function  Button2_onclick()  // 先把建立一个新的DIV的方法写成一个通用方法，然后通过调用方法实例化建立DIV
{
     var  newElement  =  createEl('div', 
     {'class': 'newDivClass', id: 'newDiv', name: 'newDivName'} ,
     {width: '300px', height:'200px', margin:' 0  auto', border:'1px solid #DDD'} , 
    '这是新建立div 中的文字。');

}

怎看之下这两个方法似乎使用了较长的代码块来达成相同的目的，其实不然，不过createEI这个通用方法实用性要强的多，在建立同类对象时性能会好的多。
  <script type="text/javascript"></script>