Apples List - Generating Content with DOM methods

Data

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

DOM methods

• createElement
• createTextNode
• appendChild

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

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

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