Home >Web Front-end >JS Tutorial >Javascript automatically generates Dom code through json_json

Javascript automatically generates Dom code through json_json

WBOYOriginal: 2016-05-16 18:30:571145browse

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;i ){ 
_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!
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to reduce JavaScript file size using Microsoft Ajax Minifier_javascript tipsNext article：How to reduce JavaScript file size using Microsoft Ajax Minifier_javascript tips

See more

Javascript automatically generates Dom code through json_json

Related articles