`

创建DOM元素的方便简单清晰方法

阅读更多

1、受够了innerHTML="";拼出来一串HTML代码

 

2、受够了给新创建的元素写上onclick="";拼出来的一大段函数和参数

 

3、受够了繁琐的一大段代码,虽然它可以使用bind函数

 var ipt=document.createElement("input");
       ipt.type='checkbox';
       div.appendChild(ipt);
       ipt.name='n1';
       ipt.id='id1';
       ipt.value=123;

 

4、今天突然发现可以这样清晰

var div = $c_e( {
		e : 'div',
		cn : 'nk'
});
var ipt1 = $c_e( {
		parent : div,
		e : 'input',
		type : 'button',
		id : 'm_tag_submit',
		value : '确定'
});

var span1 = $c_e( {
		parent : div,
		e : 'span'
	});
var span2 = $c_e( {
		parent : div,
		e : 'span',
		id : 'm_tag_counter'
	});
 

目前用到的几个属性加进去了,有新的可以自己新加

function $c_e(o)
{
    if(!o.e)return;
    var e=document.createElement(o.e);
if(o.type)e.type=o.type; //IE的需要放在添加节点前
    if(o.parent)o.parent.appendChild(e);
    if(o.value)e.value=o.value;
    if(o.id)e.id=o.id;
    if(o.name)e.name=o.name;
    if(o.cn)e.className=e.cn;
    if(o.width)e.style.width=o.width;
    if(o.size)e.size=o.size;
    return e;
}
2
0
分享到:
评论

相关推荐

    JS控件的生命周期介绍

    1.initializer: 初始化,做一些不牵扯DOM操作的初始化操作 2.createDom: 创建 DOM,在这个过程中我们创建控件需要的DOM结构 3.renderUI: 生成控件的内部元素,在这里调用子控件的渲染方法,开启子控件的生命周期 4....

    JavaScript权威指南(第六版) 清晰-完整

    15.1 DOM概览 15.2 选取文档元素 15.3 文档结构和遍历 15.4 属性 15.5 元素的内容 15.6 创建、插入和删除节点 15.7 例子:生成目录表 15.8 文档和元素的几何形状和滚动 15.9 HTML表单 15.10 其他文档特性 第16章 ...

    精通AngularJS part1

    使用ng—cloak指令隐藏DOM元素328 使用ng—bind指令隐藏表达式329 引入AngularJS和应用脚本文件330 引用脚本文件330 AngularJS和异步模块定义331 123浏览器支持333 在InternetExplorer中使用333 124小结334 ...

    vue实践基础项目面试题

    如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 九、计算属性 计算属性是在模板中放入太多的逻辑会让模板过...

    JavaScript框架OurJS.zip

    比如要把元素 A 插入到元素 B 的前边,使用 A.putAfater(B) 即可实现,因此没有提供 B.someMethod(A) 这样的方法。 让旧浏览器能尽可能多的使用新的标准 API。这样可以减少 OurJS 的自定义 API 的数量。 为常用的...

    【卷一/共两卷】AJAX实战pdf高清版90M

    2.4.3 创建DOM节点 2.4.4 为文档增加样式 2.4.5 捷径:使用innerHTML属性 2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 向服务器发送请求 2.5.4 使用回调函数监视请求 ...

    focus-rings:集中式系统,用于在网页上的任意位置显示和设置焦点指示符

    containerRef 接受一个 ,该引用用于这些位置计算的DOM元素。 您需要在应用程序的顶层包含一个FocusRingScope实例。 如果组件创建一个新的滚动容器,或者绝对位于视口中,则应添加一个新的FocusRingScope 。 funct

    java面试题

    答:servlet实例化时调用init方法,得到请求时调用service方法,service方法自动派遣doget或dopost方法,最后当实例销毁时调用destroy方法。 error和exception有什么区别? 答:error是指错误,通常程序员不能通过...

    完整版《HTML5高级程序设计》2

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    完整版《HTML5高级程序设计》4

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    完整版《HTML5高级程序设计》5

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    完整版《HTML5高级程序设计》3

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part5

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part4

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part1

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part2

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

    HTML5高级程序设计.part3

     本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...

Global site tag (gtag.js) - Google Analytics