Javascript automatically generates DOM code via JSON _json

JSON turn HTML Trio
Ingredients: JSON

Copy Code code 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: "2nd round", fn:{' click ': function () {alert (' I Am Lili ')}}}
]}
},
{
' span ': {ID: ' Q ', Con: "I'm Span"}
}
]}
}

Id=id
Classname=class
Num= Cycle times
fn= binding function
con= element content
Sub = has child nodes
Main Course: Method

Copy Code code 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 an ID exists, the loop defaults to 1 because the ID is not repeatable
for (Var j=0;j<num;j++) {
var obj= document.createelement (attr);
Parent? Parent.appendchild (obj): document.body.appendChild (obj);//incoming parent element when recursive, no default from body output
for (Var attr2 in data[attr]) {
var _tempattr=data[attr][attr2];
Switch (ATTR2) {
Case "id":
obj.id=_tempattr;
Break
Case "ClassName"://Support multiple class incoming ~ Jane Dot ~
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 a child node starts recursion
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, can generate new child 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 properties
Obj.setattribute (ATTR2,_TEMPATTR);
}
}
}
}
return this;
}
}

Jsontohtml.init (JSON); Class
Serving

Copy Code code as follows:

<div id= "Flower" class= "A1" >
<ul id= "Flower1" class= "A2 A3" >
<li> content Content </li>
<li> content Content </li>
<li> content Content </li>
</ul>
<ul id= "Flower4" class= "A2 A3" >
<li> 2nd round of </li>
<li> 2nd round of </li>
<li> 2nd round of </li>
</ul>
<span id= "Q" > I am span</span>
<div>

It is mainly through recursion and iteration to traverse the JSON members to generate HTML elements, better that NUM can set the number of loops to write less code. Concrete application Look at the scene
This is just a small example, look forward to follow-up!