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

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