## 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>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); }

- Markup
- Script

     <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>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); }

- Markup
- Script

     <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);
    }