在 JS 中创建 HTML 元素（没有 jQuery）？ 我究竟做错了什么？

Question

I'm new to node.js. Here is my code:
My Code

More specifically, here is what I have for 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);
};

I'm not sure where I'm going wrong with creating the HTML elements.

Answer 1

You can append only one element to document . Append the section s to document.body or create a container and target it with 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; }