DOM allows us to manage (add, update, copy, replace, or delete) nodes of an HTML (or XHTML or XML) page elements. This is a powerful ability since this enables us to add new elements or modify existing DOM nodes on-the-fly.
Let us begin by providing DOM APIs that allow us to manage DOM elements. Please note that DOM provides additional methods for creating nodes as well; these methods are part of document object and we refer the reader to look at listing of properties of the document that we provided earlier. For the sake of simplicity, we list only a handful of these APIs.
The cloneNode() method takes a boolean parameter; if the parameter is set to true, then DOM recursively copies all the children of the currentNode as well. If this parameter is set to false, then DOM does not copy any child node of the currentNode. We should mention that since text value of a node is considered its child element, setting the parameter to false would mean that the text value of the currentNode is not copied.
// Methods to create new nodes. var elem = createElement(type); var elem = createTextNode(text); var elem = createComment(commentText); // Methods to append a new node to a parentNode. parentNode.appendChild(elem); parentNode.insertBefore(elem); // Replace or remove child nodes. parentNode.replaceChild(newNode, oldNode); parentNode.removeChild(childNode); // Make a copy the currentNode. var newNode = currentNode.cloneNode(boolCopyAllChildNodes),
Next, we provide an example that demonstrates methods for creating and inserting nodes in the DOM tree. We use document.getElementsByTagName("body")[0] to get a handle for the body element. Since head and body elements are unique, we can also refer to the body and head elements as document.head and document.body respectively; thus, in this example, we could also refer to the body element as "var bodyElem = document.body".
<!doctype html>
<html>
<head> <h3>A Wizard' To-Do List.<h3></head>
<body>
<script type="text/javascript">
var div1 = document.createElement("div");
var bodyElem = document.getElementsByTagName("body")[0]; // same as = document.body;
bodyElem.appendChild(div1);
div1.innerHTML = "[div1] First, practice some spells.<br><br>";
var div2 = document.createElement("div");
bodyElem.insertBefore(div2, div1);
div2.innerHTML = "[div2] Second, feed the dragon.<br><br>";
var div3 = document.createElement("div");
bodyElem.insertBefore(div3, null);
div3.innerHTML = "[div3] Third, repair the broken wand.<br>";
div3.innerHTML += "[div3] Value: " + div3.nodeValue + "<br>";
div3.innerHTML += "[div3] Type: " + div3.nodeType + "<br><br>";
var text1 = document.createTextNode("Fourth, invite wizard friends for dinner.");
bodyElem.appendChild(text1);
div3.innerHTML += "[text1] Value: " + text1.nodeValue + "<br>";
div3.innerHTML += "[text1] Type: " + text1.nodeType + "<br><br>";
var comment1 = document.createComment("Fifth, this is a comment.");
bodyElem.appendChild(comment1);
div3.innerHTML += "[comment1] Value: " + comment1.nodeValue + "<br>";
div3.innerHTML += "[comment1] Type: " + comment1.nodeType + "<br><br>";
</script>
</body>
</html>
When we load this page on a browser, we see the following text on the browser:
A Wizard' To-Do List. [div2] Second, feed the dragon. [div1] First, practice some spells. [div3] Third, repair the broken wand. [div3] Value: null [div3] Type: 1 [text1] Value: Fourth, invite wizard friends for dinner. [text1] Type: 3 [comment1] Value: Fifth, this is a comment. [comment1] Type: 8 Fourth, invite wizard friends for dinner.
Since we insert div2 before div1, we see that the output from div2 appears before div1. In the next case, we pass the second argument as null to insertBefore() and this inserts the child at the end of the parent's list -- that is in this case after div2 and div1.
We also print the nodeType for the div and text nodes. Understandably, the values for these nodes are different; 1 (ELEMENT_NODE) and 3 (TEXT_NODE) respectively.