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