## Javascript and DOM: Building Content

Example 10.1 - Example 10.1
<p><button id="makelist" type="submit">Build List of Seasons</button></p><div id="seasonslist1"> </div>function makeSeasonsList() { let ul_node = document.createElement("ul"); /* Autumn */ let li_node1 = document.createElement("li"); let li_text1 = document.createTextNode("Autumn"); li_node1.appendChild(li_text1); /* Winter */ let li_node2 = document.createElement("li"); let li_text2 = document.createTextNode("Winter"); li_node2.appendChild(li_text2); /* Spring */ let li_node3 = document.createElement("li"); let li_text3 = document.createTextNode("Spring"); li_node3.appendChild(li_text3); /* Summer */ let li_node4 = document.createElement("li"); let li_text4 = document.createTextNode("Summer"); li_node4.appendChild(li_text4); /* Append the list items to the ul */ ul_node.appendChild(li_node1); ul_node.appendChild(li_node2); ul_node.appendChild(li_node3); ul_node.appendChild(li_node4); /* Place on page */ let container = document.getElementById("seasonslist1"); container.appendChild(ul_node); } /* Wait for DOM to be loaded, then add the click listener to the button */ document.addEventListener('DOMContentLoaded',function(){ document.getElementById('makelist').addEventListener('click', makeSeasonsList); });

- Markup
- Script
- Display

     <p>
       <button id="makelist" type="submit">Build List of Seasons   </button>
     </p>
     <div id="seasonslist1">
     </div>

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

    function makeSeasonsList() {
      let ul_node = document.createElement("ul");

      /* Autumn */
      let li_node1 = document.createElement("li");
      let li_text1 = document.createTextNode("Autumn");
      li_node1.appendChild(li_text1);

      /* Winter */
      let li_node2 = document.createElement("li");
      let li_text2 = document.createTextNode("Winter");
      li_node2.appendChild(li_text2);

      /* Spring */
      let li_node3 = document.createElement("li");
      let li_text3 = document.createTextNode("Spring");
      li_node3.appendChild(li_text3);

      /* Summer */
      let li_node4 = document.createElement("li");
      let li_text4 = document.createTextNode("Summer");
      li_node4.appendChild(li_text4);

      /* Append the list items to the ul */
      ul_node.appendChild(li_node1);
      ul_node.appendChild(li_node2);
      ul_node.appendChild(li_node3);
      ul_node.appendChild(li_node4);

      /* Place on page */
      let container = document.getElementById("seasonslist1");
      container.appendChild(ul_node);
    }

    /* Wait for DOM to be loaded, then add the click listener
       to the button */
    document.addEventListener('DOMContentLoaded',function(){
      document.getElementById('makelist').addEventListener('click', makeSeasonsList);
    });