Creating HTML elements in JS (without jQuery)? What am I doing wrong?

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.

This is wrong: document.createElement(newSection); .createElement() takes a tagName as the argument, not a DOM element and you want to put the section into document.body, not document. — jfriend00
– jfriend00, Commented Oct 30, 2017 at 2:01
"I'm new to node.js" - Node.js runs JavaScript on the server, where it doesn't make sense to be creating DOM elements. Is the code shown supposed to run in the browser rather than in Node.js? — nnnnnn
– nnnnnn, Commented Oct 30, 2017 at 2:07
Yes, it is supposed to run in the browser, but I guess node.js isn't required at all in this case? — daezilla
– daezilla, Commented Oct 30, 2017 at 2:10

Adam Azad · Accepted Answer · 2017-10-30 02:23:09Z

1

You can append only one element to document. Append the sections 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;
}

edited Oct 30, 2017 at 2:23

answered Oct 30, 2017 at 2:02

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daezilla Over a year ago

Thank you! Is there something that I should change for it to work in browser? The code works when I run it on here and on jsfiddle, but not in-browser when I make the same changes in my js file.

Adam Azad Over a year ago

@daezilla, replace let with var because most browsers don't support let keyword (from ES6) yet.

daezilla Over a year ago

var would be my go-to keyword, however, the instructions in this exercise asks to use let instead.

Adam Azad Over a year ago

@daezilla, assuming the browser supports let, you should be fine. Present the work you've done using Google Chrome.

Collectives™ on Stack Overflow

Creating HTML elements in JS (without jQuery)? What am I doing wrong?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related