簡化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這個通用方法實用性要強的多，在建立同類對象時性能會好的多。