Java Reference
In-Depth Information
This is a fairly easy example to follow because you're using the same tree structure you created with
diagrams, but it does show how the DOM effectively creates this hierarchy and that you can move
around within it using script.
Methods of the Node Object
Whereas the Node object's properties enable you to navigate the DOM, its methods provide the
completely different ability to add and remove nodes from the DOM, thus fundamentally altering
the structure of the HTML document. The following table lists these methods.
methods of node objeCts
desCription
Adds a new Node object to the end of the list of child nodes.
This method returns the appended node.
appendChild(newNode)
Returns a duplicate of the current node. It accepts a boolean
value. If the value is true , the method clones the current
node and all child nodes. If the value is false , only the
current node is cloned and child nodes are left out of the
clone.
cloneNode(cloneChildren)
Returns true if a node has any child nodes and false
if not
hasChildNodes()
insertBefore(newNode,
referenceNode)
Inserts a new Node object into the list of child nodes before
the node stipulated by referenceNode . Returns the inserted
node
Removes a child node from a list of child nodes of the Node
object. Returns the removed node
removeChild(childNode)
Creating htML elements and text with DOM Methods
trY it out
In this Try It Out you create a web page with just paragraph <p/> and heading <h1/> elements, but
instead of HTML you'll use the DOM properties and methods to place these elements on the web page.
Start up your preferred text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 9, Example 3</title>
</head>
<body>
<script>
var newText = document.createTextNode("My Heading");
Search WWH ::




Custom Search