Javascript 通过json自动生成Dom小示例

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能制定循环次数可以少写很多代码.具体应用看场景了

　　这只是个小例子，期待后续!