## Review: Building a List

Data:

    {
        "apples" : ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin']
    }

JavaScript:

    function makeApplesList() {
        ul_node = document.createElement("ul");
        mydata= {"apples" : ['Macoun','Empire','Honey Crisp','Albemarle Pippin']};
        var itemlist = mydata.apples;
        for (var myitem of itemlist) {
           var text_node = document.createTextNode(myitem);
           var li_node = document.createElement("li");
           li_node.appendChild(text_node);
           ul_node.appendChild(li_node);
        };
        var container = document.getElementById("itemlistcontainer");
        container.appendChild(ul_node);
    }

Invoking the script with a "click" event:

    <button onclick="makeApplesList();">Build List of Apples</button>

### Entire Example:

Example 9.1 - Example 9.1<div id="itemlistcontainer"><button onclick="makeApplesList();" type="submit">Build List of Apples</button></div>function makeApplesList() { ul_node = document.createElement("ul"); mydata= {"apples" : ['Macoun','Empire','Honey Crisp','Albemarle Pippin']}; var itemlist = mydata.apples; for (var myitem of itemlist) { var text_node = document.createTextNode(myitem); var li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; var container = document.getElementById("itemlistcontainer"); container.appendChild(ul_node); }

- Markup
- Script

     <div id="itemlistcontainer">
       <button onclick="makeApplesList();" type="submit">Build List of Apples   </button>
     </div>

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

    function makeApplesList() {
         ul_node = document.createElement("ul");
         mydata= {"apples" : ['Macoun','Empire','Honey Crisp','Albemarle Pippin']};
         var itemlist = mydata.apples;
         for (var myitem of itemlist) {
            var text_node = document.createTextNode(myitem);
            var li_node = document.createElement("li");
            li_node.appendChild(text_node);
            ul_node.appendChild(li_node);
         };
         var container = document.getElementById("itemlistcontainer");
         container.appendChild(ul_node);
     }