## Javascript and DOM: Building Content

Example 8.10 - Example 8.10<div id="seasonslist1"><p><button onclick="makeSeasonsList();" type="submit">Click to append list of seasons</button></p></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); }

- Markup
- Script

     <div id="seasonslist1">
       <p>
         <button onclick="makeSeasonsList();" type="submit">Click to append list of seasons     </button>
       </p>
     </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);
    }