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

 

往往我們在使用 JavaScript 來動態建立 html 元素時，總是要經過重重的敘述來設定新建立的元素。

比方說我們想要建立一個 div 標籤，而我們希望它能擁有一些文字在裡面並且具有下列的這些屬性。

id = 'newDiv'
class = 'newDivClass'
name = 'newDivName'
style = 'width: 300px; height:200px; margin:0 auto; border:1px solid #DDD'

// 依照原始的方式是這樣設定的
var newElement = document.createElement('div');
var newText = document.createTextNode('這是存在於在新建立標籤 div 中的文字。');
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);
別說看了頭暈，連打字都閒累，試試看這個方式吧！

// 這是經過調整的 html 元素建立方式，以後每次要建立 html 元素時就呼叫它。
createEl = function(t, a, y, x) {
    var e = document.createElement(t);
    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;
}

// 現在我們開始使用 createEl 這個函式來達成與第一段程式碼相同的目的
var newElement = createEl('div',
    {'class': 'newDivClass', id: 'newDiv', name: 'newDivName'},
    {width: '300px', height:'200px', margin:'0 auto', border:'1px solid #DDD'},
    '這是存在於在新建立標籤 div 中的文字。');

乍看之下第二個方法似乎使用了較長的敘述來達成相同的目的，其實不然，別忘了 createEl 這個函式可是很環保的呢！可以重複使用不說，就連討厭的同類敘述語句這個麻煩也免掉了呢。

===================================================================

var e = new Element("div", { id: 'gotop', html: '<img src="images/top.gif" title="到顶部" />'}).setStyles({
                position: "fixed",
                right: 20,
                bottom: 20,
                cursor: "pointer"
            }).inject(b(document.body)).fade("hide");