我们在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这个通用方法实用性要强的多，在建立同类对象时性能会好的多。
如对本文有疑问， 点击进行留言回复！！
androidx+viewpage+tablayout+json开发（加载图片和视频）
我要评论
网友评论