JSでHTML要素を作成する（jQueryなし）私は間違って何をしていますか？

Question

私はnode.jsを使い慣れましたここに私のコードは次のとおりです。
My Code

具体的には、ここで私はJSのために持っているものです。

let torontoTeams = [ 
    {"name": "Raptors", "description": "The Raptors compete in the National Basketball Association (NBA), as a member club of the league's Eastern Conference Atlantic Division."}, 

    {"name": "Maple Leafs", "description": "The Maple Leafs are one of the 'Original Six' NHL teams, and have won the Stanley Cup 13 times."}, 

    {"name": "Blue Jays", "description": "The Blue Jays compete in Major League Baseball (MLB) as a member club of the American League (AL) East division."} 
]; 
for (let i=0; i < torontoTeams.length; i++) { 

    let newSection = document.createElement('section'); 
    document.appendChild(newSection); 

    let newTeam = document.createElement('h1'); 
    newTeam.appendChild(document.createTextNode(torontoTeams[i].name)); 

    let newDesc = document.createElement('P'); 
    newDesc.appendChild(document.createTextNode(torontoTeams[i].description)); 

    document.createElement(newSection); 
    newSection.appendChild(newTeam); 
    newSection.appendChild(newDesc); 
}; 

私はHTML要素を作成すると間違って行くよどこか分かりません。

Answer 1

documentには1つの要素しか追加できません。 ; `` .createElement（）は `としてtagNameをかかり`のdocument.createElement（newSection）：これは間違っているdocument.bodyにsection Sを追加またはコンテナを作成し、document.querySelector

var body = document.body, 
 
    torontoTeams = [ 
 
    {"name": "Raptors", "description": "The Raptors compete in the National Basketball Association (NBA), as a member club of the league's Eastern Conference Atlantic Division."}, 
 

 
    {"name": "Maple Leafs", "description": "The Maple Leafs are one of the 'Original Six' NHL teams, and have won the Stanley Cup 13 times."}, 
 

 
    {"name": "Blue Jays", "description": "The Blue Jays compete in Major League Baseball (MLB) as a member club of the American League (AL) East division."} 
 
]; 
 

 

 
for (let i=0; i < torontoTeams.length; i++) { 
 

 
    var newSection = document.createElement('section'); 
 
    body.appendChild(newSection); // append to body. 
 

 
    var newTeam = document.createElement('h1'); 
 
    newTeam.appendChild(document.createTextNode(torontoTeams[i].name)); 
 

 
    var newDesc = document.createElement('P'); 
 
    newDesc.appendChild(document.createTextNode(torontoTeams[i].description)); 
 

 
    // document.createElement(newSection); What is this suppose to do? It doesn't work. 
 
    
 
    newSection.appendChild(newTeam); 
 
    newSection.appendChild(newDesc); 
 
    
 
};

section { 
 
    display: block; 
 
    width: 100vh; 
 
    height: 33vh; 
 
    background-color: blue; 
 
}