Rough Guide To The DOM (part 2) - Branching Out (
Page 6 of 8 )
The DOM also comes with a
bunch of built-in methods designed to manipulate the DOM tree, adding and
removing nodes from it on the fly. As you've already seen, a node on the DOM
tree could be either an HTML tag or a text fragment - and the DOM comes with
methods to add both these types of nodes to the tree, through program
code.
I'll begin with the createElement() method, which is used to create
a new HTML tag. The following code snippet creates an <img> tag as a node,
and assigns it the name "imageObj".
<script language="JavaScript">
var imageObj = document.createElement("img");
</script>
Once the node has been created, attributes can be
assigned to it using the setAttribute() method. For example, the code
snippet
<script language="JavaScript">
imageObj.setAttribute("src", "logo_n.gif");
imageObj.setAttribute("width", "50");
imageObj.setAttribute("height", "50");
</script>
is equivalent to the tag
<img src="logo_n.gif" width="50" height="50">
Once the node has been created, the next order of
business is to add it to the document tree - a task accomplished by the
appendChild() method. The appendChild() method is used to append the
newly-created node to a specific location in the tree.
The following code
snippet would attach the "imageObj" node as a child of the element identified by
"heading1".
<script language="JavaScript">
document.getElementById("heading1").appendChild(imageObj);
</script>
This article copyright Melonfire
2001. All rights reserved.