Web Programming with html5, css, and JavaScript

FIGURE 10.24B
contains the rest of the 
navigation.js
file. The first two statements create 
new 
nav
and 
ul
elements and assign them to the previously defined 
nav
and 
ul
variables. This 
time, they are for the footer. Then two more pairs of statements create “Top” and “Home” buttons 
for the bottom of the page and add them to the unordered list for this footer. Then the new 
ul
ele-
ment is inserted into the new 
nav
element, and that is inserted into the 
footer
element. The last 
statement in the 
createHeaderFooter
function appends the 
footer
to all the other material 
in the body. This other material is now the new 
header
followed by the html file’s original 
body
, 
so the 
footer
is really at the end.
Now look at the subordinate 
getli
function called from multiple locations in both fig-
ures. This function creates and populates all list items—the buttons at the top and bottom of the 
browser window. First the function creates new 
li
and 
a
elements. Then it gives the 
a
element a 
reference and a text label. Then it inserts the 
a
element into the 
li
element, and finally it returns 
that 
li
element to the calling statement.
FIGURE 10.24B 
JavaScript that adds a heading and adds header and footer navigation 
buttons to web page being loaded
nav = document.createElement("nav"); // for another nav element
ul = document.createElement("ul"); // for another unordered list
li = getli("#", "Top");
ul.appendChild(li);
li = getli("index.html", "Home");
ul.appendChild(li);
nav.appendChild(ul);
footer.appendChild(nav);
document.body.appendChild(footer);
} // end createHeaderFooter
function getli(ref, label) {
var li = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href", ref);
a.innerHTML = label;
li.appendChild(a); // insert a into li
return li;
} // end getli