简化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这个通用方法实用性要强的多,在建立同类对象时性能会好的多。
相关文章
- python通过字符串调用方法_python调用shell脚本
- javascript使用cookie实现DIV提示框只显示一次的方法
- 利用MDK软件生成bin文件的简单方法
- hbuilderx打包android证书的三种生成方法
- hbuilderx云打包ios签名的生成方法
- Redis生成全局唯一ID的实现方法
- Linux 生成唯一性UUID的方法(linux的uuid)
- 使用Linux创建可执行文件的简易方法(linux生成可执行文件)
- Oracle 表快速建立索引的方法(oracle表建索引)
- MySQL中双主键约束使用方法(mysql两个主键)
- 使用Linux系统生成安全的密钥对方法简介(linux生成密钥对)
- Linux下使用uuid命令生成唯一标识符c语言实现方法(linuxuuidc)
- MySQL中单引号的使用方法(mysql中单引号的意思)
- 不用模板只用ASP+FSO生成静态HTML页的一个方法
- JavaScript动态生成方法的例子
- 114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
- IIS下FTP服务器的PASV端口范围修改方法
- NodeJs中的非阻塞方法介绍
- 深入理解约瑟夫环的数学优化方法
- 解析PHP跳出循环的方法以及continue、break、exit的区别介绍
- c语言生成随机数的方法(获得一组不同的随机数)
- c#生成缩略图不失真的方法实例分享
- PHP批量生成静态HTML的简单原理和方法
- PHP读取CURL模拟登录时生成Cookie文件的方法
- ASP.NET生成两个日期范围内随机时间的实现方法