欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 15:34:25
我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性。比方说我们想要建立一個 div 层,则可以使用以下代码实现。 一.直接建立function Button1_onclick() //直接采用代码建立一个DIV{ var newEleme ......

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