js动态生成层方法不懂得加QQ 2270312758

最新推荐文章于 2024-09-14 18:52:56 发布

aizhongju38409

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量165

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-jth/p/9761065.html

版权

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

 1 function Button1_onclick() //直接采用代码建立一个DIV
 2 {
 3     var newElement = document.createElement('div'); 
 4     var newText = document.createTextNode('这是新建立 div 中的文字。'); 
 5     document.body.appendChild(newElement); //漏了这一句，否则行不通 
 6     newElement.id = 'newDiv'; 
 7     newElement.className = 'newDivClass'; 
 8     newElement.setAttribute('name ','newDivName'); 
 9     newElement.style.width = '300px'; 
10     newElement.style.height = '200px'; 
11     newElement.style.margin = '0 auto'; 
12     newElement.style.border = '1px solid #DDD'; 
13     newElement.appendChild(newText);  
14 }

二.把建立新对象写成一个通用方法，增加其通用性

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 中的文字。');

}