Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Adding New Content to a Page 549

using getElementById() and then use insertBefore() to put it in the right
place:

faq = document.getElementById("faq");
faq.insertBefore(expandAllDiv, faq.firstChild);

Table 19.3 contains a list of methods that can be used to modify the document. All of
them are methods of elements.

TABLE 19.3 Methods for Accessing the DOM

Method Description

appendChild(element) Adds the element to the page as a child of the method’s
target

insertBefore(new, ref) Inserts the element new before the element ref on the list
of children of the method’s target

removeAttribute(name) Removes the attribute with the supplied name from the
method’s target

removeChild(element) Removes the child of the method’s target passed in as an
argument

replaceChild(inserted,
replaced)

Replaces the child element of the method’s target passed

as the inserted argument with the element passed as the

parameter replaced

setAttribute(name, value)Sets an attribute on the method target with the name and
value passed in as arguments

There’s one other big change I made to the scripts for the page. I added a call to a new
function in the handler for the click event for the questions on the page:

updateExpandAllLink();

That’s a call to a new function I wrote, which switches the Expand All / Collapse All
link if the user manually collapses or expands all the questions. When the page is opened,
all the questions are collapsed, and the link expands them all. After the user has expanded
them all one at a time, this function will switch the link to Collapse All. The function
is called every time the user clicks on a question. It inspects the answers to determine
whether they are all collapsed or all expanded, and it adjusts the link text accordingly.
Here’s the source for that functio n:

function updateExpandAllLink() {
var faqList, answers, expandAllLink, switchLink;

▼

▼