Javascript automatically generates Dom code through JSON

JSON to HTML trio
Raw Material: JSON CopyCode The Code is as follows: var JSON = {
'Div ': {ID: 'flower', classname: "A1", Sub :[
{
'U': {ID: 'flower1', classname: ["A2", "A3"], Sub :[
{'Lil': {num: 3, Con: "content", FN: {'click': function () {alert ('I am lili ')}}}}
]}
},
{
'Ul ': {ID: 'flower4', classname: ["A2", "A3"], Sub :[
{'Lil': {num: 3, Con: "2nd rounds", FN: {'click': function () {alert ('I am lili ')}}}}
]}
},
{
'Span ': {ID: 'Q', Con: "I am span "}
}
]}
}

Id = ID
Classname = Class
Num = number of cycles
Fn = binding function
Con = Element Content
Sub = indicates that a subnode exists.
Main course: 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 an ID exists, the loop defaults to 1 because the ID cannot be repeated.
For (var j = 0; j <num; j ++ ){
VaR OBJ = Document. createelement (ATTR );
Parent? Parent. appendchild (OBJ): Document. Body. appendchild (OBJ); // input the parent element when recursion occurs. If not, the parent element is 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": // multiple classes are supported ~ Simplified ~
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": // recursion starts if a subnode exists.
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 to 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 attributes
OBJ. setattribute (attr2, _ tempattr); break;
}
}
}
}
Return this;
}
}

Jsontohtml. INIT (JSON); // Initialization
ServingCopy codeThe Code is as follows: <Div id = "Flower" class = "A1">
<Ul id = "flower1" class = "A2 A3">
<Li> content </LI>
<Li> content </LI>
<Li> content </LI>
</Ul>
<Ul id = "flower4" class = "A2 A3">
<Li> 2nd rounds </LI>
<Li> 2nd rounds </LI>
<Li> 2nd rounds </LI>
</Ul>
<Span id = "Q"> I am a span </span>
<Div>

it mainly uses recursion and iteration to traverse JSON members to generate HTML elements. It is better that num can specify the number of cycles and write less code. specific application scenarios
This is just a small example. We look forward to the future!