Javascriptはjsonを通じて自動的にDomコードを生成します.

Json-トリオ
原料: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
クラスName=クラス
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;jvar 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>obj.className= obj.className+" "+_tempAttr[k] ; 
  
} 
  
}else{ obj.className =_tempAttr;} 
  
break; 
  
case "sub": //            
  
for(var i=0;i<_tempattr.length>_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; 
  
} 
  
} 
  
 
 

Json ToHtml.init(json)//初期化
料理を出す

 
  
 
  
 
  
      
 
  
      
 
  
      
 
  
 
  
　　
 
  
 2  
 
  
 2  
 
  
 2  
 
  
 
  
　　  span 
  
 
  
 
 
 
 
              json    html   ,     num               .         
 
       ，    ! 
 
 
   
 
 

                            

＜div id=「right-1」class=「col-lg-12 col-sm-4 col-xs-4 ad」


＜div id=「right-2」class=「col-lg-12 col-sm-4 col-xs-4 ad」


＜div id=「right-3」class=「col-lg-12 col-sm-4 col-xs-4 ad」