利用ajax生成網頁內容附json及代碼

{
    "soccerTeam":["皇家馬德里","巴薩羅納","摩納哥","利物浦","拜仁"],
    "TeamName":[
        {
           "images":"./images/u=27395448,824507935&fm=26&gp=0.jpg",
           "introduce":"皇家馬德里足球俱樂部（Real Madrid Club de Fútbol ，中文簡稱爲皇馬）是一家位於西班牙首都馬德里的足球俱樂部，球隊成立於1902年3月6日，前稱馬德里足球隊。1920年6月29日，時任西班牙國王阿方索十三世把（西語，皇家之意）一詞加於俱樂部名前，徽章上加上了皇冠，以此來推進足球運動在西班牙首都馬德里市的發展。今後，俱樂部正式改名爲皇家馬德里足球俱樂部。"
        },
        {
            "images":"./images/u=27395448,824507935&fm=26&gp=0.jpg",
            "introduce":"巴塞羅那足球俱樂部（Fútbol Club Barcelona），簡稱巴薩（barça），是一家位於西班牙巴塞羅那市的足球俱樂部，西班牙足球甲級聯賽傳統豪門之一。1899年11月29日由瑞士人胡安·甘伯創立 [1]  。球隊主場諾坎普球場可容納接近十萬名觀衆，是全歐洲最大及世界第二大的足球場。"
        },
        {
            "images":"./images/timg (21).jpg",
            "introduce":"摩納哥足球俱樂部（Association Sportive de Monaco Football Club）是位於法國南部臨地中海的摩納哥公國的足球俱樂部，成立於1919年，在1948年轉爲職業球隊，現時在法國甲組足球聯賽中角逐。摩納哥之外國球隊的身份馳騁法甲戰場，卻成爲法國賽場上最成功的球隊之一，曾奪得八屆甲組聯賽冠軍及五次法國杯。03-04賽季，在歐冠進入決賽對陣葡萄牙勁旅波爾圖，創造了隊內歐冠歷史性的最好成績"
        },
        {
            "images":"./images/timg (3).jpg",
            "introduce":"利物浦（Liverpool），英格蘭西北部港口城市，英格蘭八大核心城市之一，人口約爲52萬。利物浦是默西河畔都市郡的5個自治市之一，也是默西塞德郡（Merseyside）的首府，位於倫敦西北325千米，乘火車到倫敦需2小時40分鐘。英國著名商業中心，也是第二大商港，利物浦腹地寬廣，對外貿易佔全國1/4。輸出居英國首位，輸入僅次於倫敦。曾經是英國著名的製造業中心，可是從1970年代起利物浦的船塢和傳統制造業急劇衰落。"
        },
        {
            "images":"./images/tim(2).jpg",
            "introduce":"拜仁慕尼黑足球俱樂部（FC Bayern Munich），簡稱拜仁慕尼黑或拜仁，是一家設於巴伐利亞州首府慕尼黑的德國體育俱樂部，其最著名的是參加德國足球甲級聯賽的職業足球隊，曾創紀錄的贏得28次德國足球頂級聯賽冠軍 [1]  及18次德國杯冠軍 [2]  ，爲德國最成功的足球俱樂部。"
        }
    ]
}

var section = document.querySelector(".section");
var list = document.querySelector(".section-list")
var requestURL="https://likaibei.github.io/web-item/json/content.json";
var xhr = new XMLHttpRequest();
xhr.open("GET",requestURL);
xhr.responseType="json";
xhr.send("");
xhr.onload=function(){
     var Team = xhr.response;
     Header(Team);
     showTeam(Team);
}
function Header(jsonObj){
    var soccerTeam = jsonObj['soccerTeam'];
    for (let index = 0; index <soccerTeam.length; index++) {
        var myli = document.createElement('li');
        myli.className='li';
        myli.innerHTML +=`<h1>${soccerTeam[index]}</h1>`;
        list.appendChild(myli);
    }
}
function showTeam(jsonObj){
    var introduces=jsonObj['TeamName'];
    for (let index = 0; index < introduces.length; index++){
        var mypic =document.createElement('img');
        var myP = document.createElement('p')
        myP.innerText=introduces[index].introduce;
        var myli =document.getElementsByClassName("li");
        mypic.src=introduces[index].images;
        myli[index].appendChild(mypic);
        myli[index].appendChild(myP);

    }
}