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:

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