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

我是node.js的新手 这是我的代码：
我的代码

更具体地说，这里是我所拥有的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); }; 

我不确定在创buildHTML元素时出错的地方。

Answer 1

您只能将一个元素附加到document 。 将section添加到document.body或者创build一个容器并使用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; }