Web Programming with html5, css, and JavaScript

488
ChaptER 10
 
Loops, Additional Controls, Manipulating CSS with JavaScript

---

In Figure 10.24A, note the ten pairs of statements that have this form:
li = getli(...);
ul.appendChild(li);
The 
getli
function call retrieves a new 
li
element from the subordinate 
getli
function 
you’ll see shortly. But before getting into that, let’s continue with the code in Figure 10.24A. 
Each of these pairs of statements creates one button and adds it to the unordered list of but-
tons that will go at the top of the current web page. After the list of buttons is complete, an 
appendChild(ul)
call inserts it into the empty 
nav
element. Then an 
appendChild(nav)
call adds the 
nav
element to the 
header
element—after the previously inserted 
h1
title. The 
final statement in Figure 10.24A inserts the fully populated 
header
element into the 
body
FIGURE 10.24a 
JavaScript that adds a heading and adds header and footer navigation 
buttons to web page being loaded
function createHeaderFooter() {
var h1 = document.createElement("h1");
var header = document.createElement("header");
var footer = document.createElement("footer");
var nav = document.createElement("nav");
var ul = document.createElement("ul");
var li;
h1.innerHTML = "Microgrid Development in Lawrence KS";
header.appendChild(h1);
li = getli("electricPowerHistory.html", "Electric Power History");
ul.appendChild(li);
li = getli("lawrenceHydropower.html", "Lawrence Hydropower");
ul.appendChild(li);
li = getli("index.html", "Area Description");
ul.appendChild(li);
li = getli("microgridPossibilities.html", "Microgrid Possibilities");
ul.appendChild(li);
li = getli("typicalProperty.html", "Typical Property");
ul.appendChild(li);
li = getli("localEnergy.html", "Local Energy");
ul.appendChild(li);
li = getli("collectorPerformance.html", "Collector Performance");
ul.appendChild(li);
li = getli("services.html", "Electric Power Services");
ul.appendChild(li);
li = getli("#", "Downtown Properties");
ul.appendChild(li);
li = getli("#", "Solar Shadowing");
ul.appendChild(li);
nav.appendChild(ul);
header.appendChild(nav);
document.body.insertBefore(header, document.body.childNodes[0]);
489
10.17 Case Study: Collector Performance Details and Nonredundant Website Navigation

---

element—before any other material already in the body of the current page. (That other mate-
rial is all the elements in the 
body
of the html code that called this 
createHeaderFooter
JavaScript function.)
Before moving on, notice the 
"#"
values in the first arguments of the final two 
getli
func-
tion calls. These are the dummy addresses of web pages that have not yet been created. This 
navigation.js
file is the 
only
place one needs to go to register a newly created web page! This 
simple update to the common 
navigation.js
file is the only existing-code change needed 
when a new web page is added.