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

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