Javascript 通过json自动生成Dom的代码


Posted in Javascript onApril 01, 2010

json转html 三重奏
原料:json

var json={ 
'div':{id:'flower',className:"a1",sub:[ 
{ 
'ul':{id:'flower1',className:["a2","a3"],sub:[ 
{'li':{num:3,con:"内容内容内容",fn:{'click':function(){alert('我是LiLi')}}}} 
]} 
}, 
{ 
'ul':{id:'flower4',className:["a2","a3"],sub:[ 
{'li':{num:3,con:"第2轮了",fn:{'click':function(){alert('我是LiLi')}}}} 
]} 
}, 
{ 
'span':{id:'q',con:"我是span"} 
} 
]} 
}

id=id
className=class
num=循环次数
fn=绑定函数
con=元素内容
sub =代表有子节点
主菜:method
JsonToHtml={ 
init:function(data,parent){//jsonDB,父元素 
for(var attr in data){ 
if(data[attr]["id"]){var num=1}else{var num=data[attr]["num"]||1}//如果存在id,则循环默认为1,因为id不可重复 
for(var j=0;j<num;j++){ 
var obj= document.createElement(attr); 
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//递归时传入父元素,没有则默认从body输出 
for(var attr2 in data[attr]){ 
var _tempAttr=data[attr][attr2]; 
switch(attr2){ 
case "id": 
obj.id=_tempAttr; 
break; 
case "className": //支持多个class传入~简了点~ 
if(_tempAttr.length && _tempAttr.pop){ 
for(var k=0;k<_tempAttr.length;++k){ 
obj.className= obj.className+" "+_tempAttr[k] ; 
} 
}else{ obj.className =_tempAttr;} 
break; 
case "sub": //如果有子节点则开始递归 
for(var i=0;i<_tempAttr.length;i++){ 
_tempAttr[i].sub ? this.init(_tempAttr[i]) : this.init(_tempAttr[i],obj) 
} 
break; 
case "con"://设置内容,可以生成新的子元素 
obj.innerHTML=_tempAttr; 
break; 
case "num": 
break; 
case "fn"://绑定方法 
for(var fns in _tempAttr){ 
if (window.addEventListener) { 
obj.addEventListener(fns, _tempAttr[fns], false); 
} else { 
if (window.attachEvent) { 
obj.attachEvent("on" + fns, _tempAttr[fns]); 
} 
} 
} 
break; 
default : //设置属性 
obj.setAttribute(attr2,_tempAttr);break; 
} 
} 
} 
} 
return this; 
} 
}

JsonToHtml.init(json); //初始化
上菜
<div id="flower" class="a1"> 
<ul id="flower1" class="a2 a3"> 
<li>内容内容内容</li> 
<li>内容内容内容</li> 
<li>内容内容内容</li> 
</ul> 
<ul id="flower4" class="a2 a3"> 
<li>第2轮了</li> 
<li>第2轮了</li> 
<li>第2轮了</li> 
</ul> 

<span id="q">我是span</span> 
<div>

主要还是通过递归和迭代来遍历json成员生成html元素 ,比较好的是num能制定循环次数可以少写很多代码.具体应用看场景了
这只是个小例子,期待后续!
Javascript 相关文章推荐
javascript add event remove event
Apr 07 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 #Javascript
JavaScript中实现块作用域的方法
Apr 01 #Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 #Javascript
js 异步处理进度条
Apr 01 #Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 #Javascript
Cookie 小记
Apr 01 #Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 #Javascript
You might like
php防注入及开发安全详细解析
2013/08/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
javascript遍历控件实例详细解析
2014/01/10 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python安装及变量名介绍详解
2020/12/12 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
自我评价个人范文
2013/12/16 职场文书
高中军训感言400字
2014/02/24 职场文书
大学生就业自荐书
2014/06/16 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
新郎结婚保证书
2015/02/26 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
同事去世追悼词
2015/06/23 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
《春酒》教学反思
2016/02/22 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python