HTML and CSS Reference
In-Depth Information
Table 15.6
The DOM Methods
Method
What It Does
appendChild(new node)
Appends a new node onto the end of the list of child nodes.
cloneNode(child option)
Makes a clone of a node.
hasChildNodes()
Returns
true
if the node has children.
getAttribute(attributeName)
Returns the value of the attribute of the current node.
hasAtrributes()
Returns a Boolean value if the node has defined attributes.
hasChildNodes()
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.
removeChild(child node)
Removes a child node from a list of children.
setAttributeNode(attributereference)
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.
EXAMPLE
15.5
<html>
<head>
<title>innerHTML</title>
