Javascript automatically generates DOM code via JSON _json

Source: Internet
Author: User
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!
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.