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;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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months ago By DDD

R.E.P.O. Best Graphic Settings

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7413

15

CakePHP Tutorial

1359

52

What is the format of the account name of steam

76

11

win11 activation key permanent

20

19

Show More