Introduction to the Document Object Model

Review the W3C DOM2 standard recommendation.

Working with Element Nodes

Adding and removing elements nodes works much the same way as with text nodes. The main difference being in creating the node and placing content within it.

First, you create a node using document.createElement() giving it the name of the tag you'd like to build such as P, DIV, TABLE, etc. The parameter is case-insensitive so "div", "Div" and "DIV" all create a DIV tag. Just note that the browser will return the tag name in uppercase if you inquire on it, for example:

var el = document.createElement("div");
alert(el.tagName);

would display "DIV".

Like text nodes, after you create an element you need to add it to some existing element node in the document tree in order to actually see it on the page.

But a newly created element is simply an empty tag. You'll probably first want to set some of its attributes and add content. Again a working example will help illustrate.

Add Paragraph

Here, clicking on the link will create a new P element - with some child nodes of its own - and append it to an existing DIV. Take a look at the code:

<div id="sample1">This text is in a DIV element.</div>

... code for the link ...

var paraEl, boldEl;

paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(
  document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text added to the DIV"));

document.getElementById("sample1").appendChild(paraEl);

First it creates two new elements, a P tag and a B tag. Then it adds a new text node with the string "This is a new paragraph with " to the paragraph tag. It does the same to the B tag, adding the text "bold". Then it appends that B tag (and it's child text node) to the paragraph. Another new text node with the string " text added to the DIV" is then appended to the paragraph.

At this point the paragraph element has three children, a text node, an element node for the B tag and another text node. The B element has one child, a text node. The final step is to insert the new paragraph element into the existing DIV tag on the page.

We could also have set any attribute of either new element. It makes no difference if you set an elements attribute before or after adding it to the node tree. For example, both

boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);

and

paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";

will make the bold text red. In other words, appendChild() actually moves the node into the tree, not just a copy, and the variable boldEl will still point to it.

Conclusion

There's much more to the Document Object Model than what's been covered here. Styles add a whole new dimension to content presentation and events provide a means to make pages interactive with the user. But these topics deserve their own discussion.

For now, try experimenting with what's been covered here. Familiarize yourself with the document node tree and the methods provided to navigate it and manipulate different types of nodes. This will give you a solid foundation for dealing with other features of the DOM.

Prev