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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
JavaScript Date对象详解
Mar 01 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
微信小程序反编译的实现
Dec 10 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
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/06/20 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
第一篇初识bootstrap
2016/06/21 Javascript
javascript表单正则应用
2017/02/04 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
python中for in的用法详解
2020/04/17 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
数控技术专业推荐信
2013/11/01 职场文书
师德学习感言
2014/01/31 职场文书
高中社区服务活动报告
2015/02/05 职场文书