`

创建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
分享到:
评论

相关推荐

    封装获取dom元素的简单实例

    标题中的"封装获取DOM元素的简单实例"是指将常用的DOM操作如获取元素通过ID或标签名等方法,整合到一个自定义的对象或函数中,以提高代码的可维护性和避免全局变量污染。 首先,让我们看看提供的描述和代码片段。...

    ES6 DOM元素动画库插件

    2. **选择元素**:通过`querySelector`或`querySelectorAll`等方法选择需要动画的DOM元素。 3. **配置动画**:设置动画效果,可能包括动画类型、持续时间、延迟、回调函数等。 4. **初始化插件**:调用插件提供的...

    js DOM 元素ID就是全局变量.docx

    在Chrome和某些版本的Firefox中,如果`window`对象在初始时没有`foo`属性,当你第一次尝试访问`foo`时,它会被自动创建,指向对应的DOM元素。然而,这样做并不总是安全的,因为它可能导致代码的可维护性和性能问题。...

    avaScript+DOM编程艺术+清晰中文版.rar

    本书的"清晰中文版"意味着读者可以更方便地理解和学习,避免了语言障碍,确保了学习过程的顺畅。书中的实例丰富,覆盖了日常网页开发中的各种场景,让读者能够在实践中巩固理论知识,提升技能水平。 在学习过程中,...

    CreateLine:在 html 中,也许我们需要在一些 dom 元素之间创建线条。这个可以帮助我们做这些事情

    `CreateLine`可能是用于简化这一过程的一个工具或库,允许开发者更方便地在指定的DOM元素间插入线条。下面我们将深入探讨如何在JavaScript中创建和操作线条。 首先,线条的基本实现通常是通过HTML的`<hr>`标签,它...

    jQuery 如何先创建、再修改、后添加DOM元素

    这里用到了`find()`方法来定位新创建DOM结构中的a元素,然后使用`attr()`方法为其设置属性。 最后,我们需要将这个新创建并修改过的元素添加到页面中现有的DOM树中。在jQuery中,这可以通过使用`.appendTo()`方法来...

    domapi

    这个工具提供了一种高效的方法,允许用户使用有限的DOM元素来创建或生成其他的HTML元素,从而简化Web页面的动态构建和交互过程。在现代Web开发中,DOM操作是不可或缺的一部分,它涉及到网页内容的添加、删除和修改。...

    dom4j dom4j1.6 dom4j最新版

    2. **文档操作**:DOM4J提供了丰富的API,允许开发者创建、修改和删除XML元素、属性和文本。这使得在程序中动态构建和修改XML文档变得非常便捷。 3. **XPath支持**:DOM4J实现了XPath 1.0规范,允许用户通过简洁的...

    javascript+dom书籍

    PDF格式的文档通常会提供详细的解释和清晰的结构,方便读者系统学习。通过阅读这份文档,你将能够深入理解JavaScript和DOM的基本原理,提高你的前端开发技能。文件名为"codefans.net"的压缩包可能包含了该文档,解压...

    XML&DOM帮助文档.rar

    在这样的教程中,你可能会学到如何创建DOM对象、查找和遍历XML节点、修改或添加节点、以及如何使用DOM处理命名空间等高级主题。 "XML入门手册.chm" 另一本手册可能更专注于XML的基础知识,包括XML声明、元素、属性...

    DOM对标签的增删改

    1. **增加元素**:使用`document.createElement()`创建新的元素,然后通过`appendChild()`或`insertBefore()`方法将其插入到已有的元素下或指定位置。 2. **删除元素**:`removeChild()`方法可以用来移除某个子节点...

    DOMProject(使用DOM输出XML)

    2. **创建DOM树**:DOM允许我们创建新的XML文档,通过Document对象可以添加元素、属性和文本节点。例如,使用`createElement()`、`setAttribute()`和`appendChild()`等方法可以构建XML结构。 3. **遍历DOM树**:...

    JavaScript DOM编程艺术课程(清晰中文版)

    课程还将涵盖如何使用JavaScript创建、修改和删除DOM元素,这是动态更新网页内容的基础。你将学习到如何添加事件监听器,以响应用户的交互,比如点击按钮或滚动页面。此外,还会介绍AJAX(异步JavaScript和XML),它...

    DOM4J帮助文档及使用教程

    12. **常见问题与解决方案**:列举了一些在使用DOM4J过程中可能会遇到的问题及其解决方法。 通过阅读和实践DOM4J的帮助文档和使用教程,开发者可以全面掌握DOM4J的各种特性和用法,从而更高效地处理XML数据。这个...

    Dom帮助文档2010版 最新版

    文档还涵盖了如何通过JavaScript访问和修改DOM元素,如使用`document.getElementById()`、`document.createElement()`等函数。 8. **DOM层次结构** DOM层次结构的理解是高效操作的关键。2010版文档会解释如何遍历...

    JSDOM图片转换小练习

    2. **DOM查询**:使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法获取DOM元素。在本例中,可能需要获取图片元素和文本元素。 3. **属性操作**:通过设置或改变DOM...

    DOM解析XML应用实例(入门经典案例)

    DOM(Document Object Model)是XML文档的一种解析标准,它提供了一种结构化的表示XML文档的方式,使得开发者可以方便地访问和操作XML文档的各个部分。本教程“DOM解析XML应用实例(入门经典案例)”旨在帮助初学者...

    DOM4j教程 例子

    DOM4j提供了简单直观的方法来创建XML文档。以下是一个创建XML文档的示例代码: ```java import org.dom4j.Document; import org.dom4j.DocumentHelper; import org.dom4j.Element; import org.dom4j.io....

Global site tag (gtag.js) - Google Analytics