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

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