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

　　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"}

　　}

　　]}

　　}

　　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;

　　}

　　}

　　<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>