一个简单的创建dom的函数
var regName = /^(div|a|p|ul|li|input|select|document|body|iframe)$/;
function createDom(name, obj) {
var match = regName.exec(name),
dom;
if (match && match[1]) {
dom = document.createElement(match[1]);
}
if (dom.nodeType && dom.nodeType == 1) {
for (var i in obj) {
var match = i.split(/\./);
var len = match && match.length || 0;
if (len == 1) {
dom[match[0]] = obj[i];
} else if (len == 2) {
dom.style[match[1]] = obj[i];
}
}
}
return dom;
}
调用方法示例
var newdom = createDom("input", {
"className": "alertInput data",
"type": "text",
"value":"123",
"style.width":"100px"
});
createDom("div", {
"className": "_div",
"id": "test",
"style.cssText": "margin:0;padding:0;position:fixed;top:0;left:0"
})
一个简单的创建dom的函数的更多相关文章
- 实现一个简单的虚拟DOM
现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...
- 一个简单的增强型PHP curl函数
啥都不说,先上代码 <?PHP /* * @author 小伍 */ echo "<pre>"; $proxy = array('url'=>'http:/ ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个简单的金额平均分配函数(C#版)
//总金额平均分配给总人数 //参数说明:总金额,总人数,最大金额为平均金额的倍率 public double[] GetList(double zje,int zrs,int max) { doub ...
- 一个简单的创建圆角图像的UIImage扩展实现
- (UIImage *)roundedCornerImageWithCornerRadius:(CGFloat)cornerRadius { CGFloat w = self.size.width; ...
- uiautomator 一个简单脚本创建流程
http://www.codeceo.com/article/android-ui-auto-test.html
- 一个简单的创建xml方式
, matnr LIKE mara-matnr , maktx LIKE makt-maktx , END OF itab_matnr . , class LIKE m_wwgha-class,&qu ...
- Vue.js源码解析-Vue初始化流程之动态创建DOM
目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...
- js new一个对象的过程,实现一个简单的new方法
对于大部分前端开发者而言,new一个构造函数或类得到对应实例,是非常普遍的操作了.下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程. // ES5构造函数 let Parent ...
随机推荐
- table在 点击线条颜色
效果图: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- JSP_include指令和<jsp:include>
包括三个文件:jsp_include.jsp, static.html, two.jsp 周边环境:tomcat7.0. myeclipse10 1.jsp_include.jsp <%@ pa ...
- 命令模式 & 策略模式 & 模板方法
一.策略模式 策略模式:封装易变化的算法,可互相替换. GoF<设计模式>中说道:定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换.该模式使得算法可独立于它们的客户变化. 比如 ...
- WPF学习(4)逻辑树和可视树
前面几节说了一些WPF的基础,包括XAML和布局等.在接下来的几节,我们来说说WPF的核心概念,包括逻辑树和可视树.依赖对象和依赖属性.路由事件.命令这几个部分.本节介绍下逻辑树(Logical Tr ...
- Total Command help
- C++ Primer 学习笔记_41_STL实践与分析(15)--先来看看算法【下一个】
STL实践与分析 --初窥算法[下] 一.写容器元素的算法 一些算法写入元素值.在使用这些算法写元素时一定要当心.必须.写入输入序列的元素 写入到输入序列的算法本质上是安全的--仅仅会写入与指定输入范 ...
- 解决一bug的流程复盘
听同事说有一个功能不好使了,当时有事,过了一段时间来看看这个bug 解决问题时,看的是老的日志,根据老日志看来看去没有发现问题,觉得很困惑 然后手动执行了一下,发现问题没有重现.与另一个团队的同事沟通 ...
- ssis package 在调试状态中设置断点,程序 不进入断点 的解决方案
原文:ssis package 在调试状态中设置断点,程序 不进入断点 的解决方案 针对 SSIS intergation 项目 > 属性 > Debug >Run64bITRunt ...
- SQL Server表分区详解
原文:SQL Server表分区详解 什么是表分区 一般情况下,我们建立数据库表时,表数据都存放在一个文件里. 但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆 ...
- GridView网格线都设置
如今,做网上商店的商品陈列,我想用网络格布局,但总认为空好看.所以我想给它一个净加格线.但是,我遇到了一个问题,网络格布局其实很easy,是集GridView布局和背景颜色adapter布局设置背景颜 ...