## Apples List - Generating Content with DOM methods

### Data

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

### DOM methods

- createElement
- createTextNode
- appendChild

Example 10.2 - Example 10.2 | JavaScript example2.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="example2.js"> </script>

Contents of example2.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);
    }

### JavaScript

`for ( item of arrayList )` to iterate.

    "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);
      }
        document.getElementById('fruits').appendChild(fruitList);
    }