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

【问题标题】：Creating HTML elements in JS (without jQuery)? What am I doing wrong?在 JS 中创建 HTML 元素（没有 jQuery）？我究竟做错了什么？
【发布时间】：2018-04-10 22:56:15
【问题描述】：

我是 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 元素时哪里出错了。

【问题讨论】：

这是错误的：document.createElement(newSection); .createElement() 将 tagName 作为参数，而不是 DOM 元素，并且您希望将部分放入 document.body，而不是 document。
“我是 node.js 的新手” - Node.js 在服务器上运行 JavaScript，在这里创建 DOM 元素没有意义。显示的代码是否应该在浏览器而不是 Node.js 中运行？
是的，它应该在浏览器中运行，但我想在这种情况下根本不需要 node.js？

标签： javascript html arrays node.js

【解决方案1】：

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

【讨论】：

谢谢！有什么我应该改变它才能在浏览器中工作吗？该代码在我在这里和 jsfiddle 上运行时有效，但在我的 js 文件中进行相同更改时在浏览器中无效。
@daezilla，将let 替换为var，因为大多数浏览器还不支持let 关键字（来自ES6）。
var 将是我的首选关键字，但是，本练习中的说明要求改用 let。
@daezilla，假设浏览器支持let，你应该没问题。展示您使用 Google Chrome 完成的工作。