Rough Guide To The DOM (part 2) - Dumbing It Down (
Page 7 of 8 )
Just as
you can create HTML tags as nodes, the DOM also allows you to create new text
nodes on the tree with the aptly-named createTextNode() method. Here's an
example:
<script language="JavaScript">
var insultObj = document.createTextNode("Could you *be* any dumber?");
</script>
Again, the appendChild() method comes into play to attach
the new text node to the appropriate branch of the document tree.
<script language="JavaScript">
document.getElementById("heading1").appendChild(insultObj);
</script>
Let's see how this plays out in a real-life example. I've
put together a simple HTML page, which contains nothing except a set of
<p> tags and some JavaScript code. The JavaScript will create a new text
node and a new <img> tag and add them to the document tree as children of
the <p> tag, using the code snippets I've just demonstrated.
<html>
<head>
</head>
<body>
<p id="heading1"></p>
<script language="JavaScript">
// set up the image
var imageObj = document.createElement("img");
imageObj.setAttribute("src", "logo.gif");
imageObj.setAttribute("width", "50");
imageObj.setAttribute("height", "50");
document.getElementById("heading1").appendChild(imageObj);
// set up the text node
var insultObj = document.createTextNode("Could you *be* any dumber");
document.getElementById("heading1").appendChild(insultObj);
// use this for testing
var pObj = document.getElementById("heading1");
// returns IMG
// alert (pObj.childNodes[0].nodeName);
// returns #text
// alert (pObj.childNodes[1].nodeName);
</script>
</body>
</html>
Although the page contains only a single <p> tag,
running the script will add an <img> tag and a line of text to the
document tree, which will be immediately visible in the browser.
Of course,
the DOM comes with a bunch of other methods as well - here's a brief list,
together with an explanation of their function.
removeNode() - remove a
node (and/or all its children) from the document tree
replaceNode() -
replace a node with another node
cloneNode() - duplicate an existing
node
swapNode() - swap the positions of two nodes in the document
tree
insertBefore() - insert a node at a specific point in the document
tree
Most of these are self-explanatory, and they're not used all that
often, so I don't plan to discuss them in detail - they're included here for the
sake of completeness.
This article copyright Melonfire
2001. All rights reserved.
/ 5 
