往往我們在使用 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 這個函式可是很環保的呢！可以重複使用不說，就連討厭的同類敘述語句這個麻煩也免掉了呢。
posted on 2006-04-03 14:25
汪杰 阅读(2375)
评论(4) 编辑 收藏 引用 所属分类:
hengxing网站js