| <body> | |
| <div class="box"> | |
| <div class="box-content"> | |
| <h3 id="teams"></h3> | |
| <ul id="sports-teams"></ul> | |
| </div> | |
| </div> | |
| </body> |
| /* | |
| Within the JS there is an array of sportsTeams from Philly. We want to take that array and render it to the DOM in an unordered list. Thankfully there is already a "ul" element on the DOM that we can get to by ID. Your job is to iterate over the array and transform each from a string into a 'li' element and append it as a child to the existing ul element. | |
| */ | |
| window.onload = function(){ | |
| let teams = document.getElementById("teams"); | |
| teams.innerHTML = "Teams HERE"; | |
| let sportsList = document.getElementById("sports-teams"); | |
| let sportsTeams = ["Phillies", "Eagles", "76ers", "Flyers", "Union"]; | |
| sportsTeams.map(function(team){ | |
| let listElement = document.createElement("LI"); | |
| let teamNode = document.createTextNode(team); | |
| listElement.appendChild(teamNode); | |
| sportsList.appendChild(listElement); | |
| }) | |
| }; | |
Within the JS there is an array of sportsTeams from Philly. We want to take that array and render it to the DOM in an unordered list. Thankfully there is already a "ul" element on the DOM that we can get to by ID. Your job is to iterate over the array and transform each from a string into a 'li' element and append it as a child to the existing ul element.
A Pen by Jesse Tomchak on CodePen.