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能制定循环次数可以少写很多代码.具体应用看场景了这只是个小例子，期待后续!

复制代码代码如下: $(document).ready(function(){ $('#tabs').tabs({add:addEventHandler}); //给tabs块绑定addEventHandler事件 $('#newtabs').click(addTab); }) var tabCounter = 1; function addTab(){ if(t>>>详细阅读

本文标题：Javascript 通过json自动生成Dom的代码

地址：http://www.17bianji.com/kaifa2/JS/26727.html

1/2 1