HTML and CSS Reference
Table 15.6 The DOM Methods
What It Does
Appends a new node onto the end of the list of child nodes.
Makes a clone of a node.
Returns true if the node has children.
Returns the value of the attribute of the current node.
Returns a Boolean value if the node has defined attributes.
Returns a Boolean value if the node has defined child nodes.
insertBefore(new node, current node)
Inserts a new node in the list of children.
Removes a child node from a list of children.
Sets or creates an attribute for the current node.
replaceChild(new child, old child)
Replaces an old child node with a new one.
The easiest way to get or modify the content of an element is by using the innerHTML
property. Although the innerHTML is not a part of the W3C DOM specification, it is sup-
ported by all major browsers. The innerHTML property is useful for inserting or replacing
the content of HTML elements; that is, the code and text between the element's opening
and closing tag. It can also be used to view the source of a page that has been dynamically
modified (including < html > and < body >). Interactive pages are created by simply changing
the value of the element's innerHTML property. Because it is a property, not a method,
innerHTML doesn't return a reference to the content it inserts. If you need to do more than
simply get or set content, then you can use specific DOM methods instead.
In Example 15.5 the innerHTML property is used to retrieve the contents of two para-
graphs. First we will give the paragraphs an id so that we can easily identify a particular
paragraph. Next, with the id of the element, the getElementById method returns a Java-
Script reference to the specified paragraph, and finally the innerHTML property contains
the text between the <p></p> tags. With this property we can easily modify the para-
graph's text and style on the fly.