## Apples List - Generating Content with strings

### Data

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

### JavaScript

- `innerHTML` is used to "get" or "set" the string value.
- Use "+" to concatenate strings in JavaScript
  `let fullName = firstName + " " + lastName;`

Example 10.4 - Example 10.4 | JavaScript example4.js<h1>List of Fruits from Data</h1><div id="fruits">List will go here.</div>

- Markup
- Script

     <h1>List of Fruits from Data </h1>
     <div id="fruits">List will go here.
     </div>

In `head` element:

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

Contents of example4.js

    "use strict";

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

    function buildFruitList(){
      let fruitList = "<ul>";

      for (const item of fruits["apples"].sort()) {
          let li = "<li>" + item + "</li>";
          fruitList = fruitList + li;
      }
      fruitList = fruitList + "</ul>";
      console.log(fruitList);
      document.getElementById('fruits').innerHTML = fruitList;
    }

### JavaScript

- `for ( item of arrayList )` to iterate.
- `innerHTML` to set the HTML to a string value (to be parsed into DOM nodes)

    "use strict";

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

    function buildFruitList(){
      let fruitList = "<ul>";

      for (const item of fruits["apples"].sort()) {
          let li = "<li>" + item + "</li>";
          fruitList = fruitList + li;
      }
      fruitList = fruitList + "</ul>";
      console.log(fruitList);
      document.getElementById('fruits').innerHTML = fruitList;
    }