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

【更新时间：2010-09-13 | 字体：大中小】

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

我们在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这个通用方法实用性要强的多，在建立同类对象时性能会好的多。

转载请注明来源：IT学习网网址：http://www.t086.com/ 向您的朋友推荐此文章
特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们，我们会尽快予以更正。