Javascript는 json_json을 통해 Dom 코드를 자동으로 생성합니다.

json에서 html trio
원시 자료: json

코드 복사 코드는 다음과 같습니다.

var json ={
'div':{id:'flower',className:"a1",sub:[
{
'ul':{id:'flower1',className:[ "a2", "a3"],sub:[
{'li':{num:3,con:"콘텐츠 콘텐츠 콘텐츠",fn:{'click':function(){alert('나는 LiLi입니다 ')}} }}
]}
},
{
'ul':{id:'flower4',className:["a2","a3"],sub:[
{' li':{num:3,con:"2차 라운드",fn:{'click':function(){alert('나는 LiLi입니다')}}}}
]}
},
{
'스팬':{id:'q',con:"나는 스팬입니다"}
}
]}
}

id= id
className=class
num=루프 수
fn=바인딩 함수
con=요소 콘텐츠
sub = 하위 노드를 나타냅니다.
메인 요리: 메소드

코드 복사 코드는 다음과 같습니다.

JsonToHtml={
init:function(data ,parent){// jsonDB, 상위 요소
for(var attr in data){
if(data[attr]["id"]){var num=1}else{var num=data[attr ]["num"] ||1}//ID가 존재하는 경우 ID는 반복될 수 없으므로 루프의 기본값은 1입니다.
for(var j=0;jvar obj= document.createElement(attr);
parent ? parent.appendChild(obj) : document.body.appendChild(obj);//반복할 때 상위 요소를 전달하고 그렇지 않은 경우 다음과 같이 본문에서 출력됩니다. default
for(var attr2 in data[attr]){
var _tempAttr=data[attr][attr2]
switch(attr2){
case "id":
obj. id=_tempAttr;
break;
case "className ": //여러 클래스가 전달되도록 지원~ 더 간단하게~
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": //sub가 있는 경우 노드가 재귀를 시작합니다.
for(var i=0;i<_tempattr.length>_tempAttr[i].sub ? this.init(_tempAttr[i]) : this.init(_tempAttr[i ],obj)
}
break
case "con"://새 하위 요소를 생성할 수 있는 콘텐츠 설정
obj.innerHTML=_tempAttr;
break;
case "num":
break
case "fn"://바인딩 방법
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 : //속성 설정
obj.setAttribute(attr2,_tempAttr);break ;
}
}
}
}
이것을 반환합니다.
}
}

JsonToHtml.init(json);
서빙

코드 복사 코드는 다음과 같습니다.

• 콘텐츠 콘텐츠
콘텐츠 콘텐츠 콘텐츠 콘텐츠

　

🎜>
• 2라운드


• 2라운드
• 2라운드
  

🎜>　

주로 json 멤버를 순회하여 html 요소를 생성합니다. . 더 좋은 점은 num이 루프 수를 지정할 수 있고 더 적은 양의 코드를 작성할 수 있다는 것입니다. 구체적인 적용은 시나리오에 따라 다릅니다.
이것은 단지 작은 예일 뿐이므로 후속 조치를 기대합니다!