Javascript and DOM: Building Content

Using an array (a list).

let seasons = ['Spring', 'Summer', 'Autumn', 'Winter'];

Iterate through Array

Example 8.11 - Example 8.11
 
 <div id="seasonslist2">
   <p>
     <button onclick="makeSeasonsList();" type="submit">Click to append list of seasons     </button>
   </p>
 </div>

In script element within head element (<script>): 

function makeSeasonsList() {
    ul_node = document.createElement("ul");
    let seasons = ['Spring', 'Summer', 'Autumn', 'Winter'];
    for (i in seasons) {
      let mytext = i + " " + seasons[i];
      let text_node = document.createTextNode(mytext);
      let li_node = document.createElement("li");
      li_node.appendChild(text_node);
      ul_node.appendChild(li_node);
    };
    let container = document.getElementById("seasonslist2");
    container.appendChild(ul_node);
}
 

Using forEach array method

Example 8.12 - Example 8.12
 
 <div id="seasonslist3">
   <p>
     <button onclick="makeSeasonsList();" type="submit">Click to append list of seasons     </button>
   </p>
 </div>

In script element within head element (<script>): 

function makeSeasonsList() {
    ul_node = document.createElement("ul");
    let seasons = ['Spring', 'Summer', 'Autumn', 'Winter'];
    seasons.forEach(function(s){
      let text_node = document.createTextNode(s);
      let li_node = document.createElement("li");
      li_node.appendChild(text_node);
      ul_node.appendChild(li_node);
    });
    let container = document.getElementById("seasonslist3");
    container.appendChild(ul_node);
}