Json

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>

<section>
</section>
<script type="text/javascript">
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://chengxiangstart.github.io/workjson/hero.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var superHeroes = request.response;
alert(superHeroes.name);
populateHeader(superHeroes);
powerfulwork(superHeroes);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj.sex;
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = '个人情况: 性别' + jsonObj['sex'] + ' // 力量: ' + jsonObj['strong']+'//身高:'+jsonObj['height'];
header.appendChild(myPara);
}
function powerfulwork(jsonObj){
var heroes = jsonObj['power'];
for (var i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
    var myPara1 = document.createElement('p');
    var myPara2 = document.createElement('p');
    var myPara3 = document.createElement('p');

   myPara1.textContent = '能力: ' + heroes[i].ability;
   myPara2.textContent = '续航时间 ' + heroes[i].duration;
   myPara3.textContent = '等待时间'+heroes[i].waiting;

    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);

section.appendChild(myArticle);
}

}
</script>
</body>
</html>