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;i ){
_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이 루프 수를 지정할 수 있고 더 적은 양의 코드를 작성할 수 있다는 것입니다. 구체적인 적용은 시나리오에 따라 다릅니다.
이것은 단지 작은 예일 뿐이므로 후속 조치를 기대합니다!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

<garden> : 정원 재배 - 완전한 돌연변이 가이드

3 몇 주 전 By DDD

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

KB5055612 수정 방법 Windows 10에 설치되지 않습니까?

3 몇 주 전 By DDD

Nordhold : Fusion System, 설명

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

자바 튜토리얼

1665

14

Cakephp 튜토리얼

1424

52

라라벨 튜토리얼

1321

25

PHP 튜토리얼

1269

29

C# 튜토리얼

1249

24

더보기