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.

>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire