Javascript automatically generates Dom code through json_json

json to html trio
raw material: json

Copy code The code is as follows:

var json ={
'div':{id:'flower',className:"a1",sub:[
{
'ul':{id:'flower1',className:["a2", "a3"],sub:[
{'li':{num:3,con:"Content content content",fn:{'click':function(){alert('I am LiLi')}} }}
]}
},
{
'ul':{id:'flower4',className:["a2","a3"],sub:[
{' li':{num:3,con:"The 2nd round",fn:{'click':function(){alert('I am LiLi')}}}}
]}
},
{
'span':{id:'q',con:"I am span"}
}
]}
}

id= id
className=class
num=number of loops
fn=binding function
con=element content
sub = represents a child node
main dish: method

Copy code The code is as follows:

JsonToHtml={
init:function(data,parent){// jsonDB, parent element
for(var attr in data){
if(data[attr]["id"]){var num=1}else{var num=data[attr]["num"] ||1}//If id exists, the loop defaults to 1 because the id cannot be repeated
for(var j=0;jvar obj= document.createElement(attr);
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//When recursing, pass in the parent element, if not, it will be output from the body by default
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2];
switch(attr2){
case "id":
obj.id=_tempAttr;
break;
case "className ": //Support multiple classes to be passed in~simpler~
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": //If there is a sub The node starts to recurse
for(var i=0;i<_tempattr.length>_tempAttr[i].sub ? this.init(_tempAttr[i]) : this.init(_tempAttr[i ],obj)
}
break;
case "con"://Set content, which can generate new sub-elements
obj.innerHTML=_tempAttr;
break;
case "num":
break;
case "fn"://binding method
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 : //Set attributes
obj.setAttribute(attr2,_tempAttr);break;
}
}
}
}
return this;
}
}

JsonToHtml.init(json); //Initialization
Serving

Copy code The code is as follows:

• Content content content


• Content content content


• Content content content

　

• The 2nd round


• The second round


• The second round

　

It is mainly through recursion and iteration to traverse json members to generate html elements. The better thing is that num can specify the number of loops and can be written less A lot of code. The specific application depends on the scenario
This is just a small example, I look forward to the follow-up!