## Apples List - Generating Content with DOM methods

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

`fruits["apples"]` and `fruits.apples` are the same

Example 10.3 - Example 10.3 | JavaScript example3.js<h1>List of Fruits from Data</h1><div id="fruits"><!-- list goes here --></div>

- Markup
- Script

     <h1>List of Fruits from Data </h1>
     <div id="fruits"><!-- list goes here -->
     </div>

In `head` element:

    <script src="example3.js"> </script>

Contents of example3.js

    "use strict";

    let fruits = {
      "apples": ['Macoun', 'Empire', 'Honey Crisp', 'Albemarle Pippin', 'Pink Lady']
    };
    window.addEventListener('DOMContentLoaded',function(){
      buildFruitList();
    });

    function buildFruitList(){
      let fruitList = document.createElement('ul');

      for (const item of fruits.apples.sort()) {
          let li = document.createElement('li');
          li.appendChild(document.createTextNode(item));
          fruitList.appendChild(li);
      }
      console.log(fruitList);
      document.getElementById('fruits').appendChild(fruitList);
    }