• Choose a category
• All
• Classic-Fiction

By Root 207 0

good news. The bad news is that they aren't supported in IE 6 - 8 or Firefox 3.0 (they are in IE 9 and Firefox 3.5).

Adding, Removing, and Modifying Elements

Obviously, there's more to using the DOM than finding the right elements. Once you're where you need to be, you want to do something. When you boil it down, that something could be one of two things:

Change the existing DOM tree (by adding, removing, or shuffling nodes)

Change the information surrounding a given node or set of nodes. That information could be the nodes style, events, attributes, etc.

We'll come back to that second one soon. For now, let's talk about shaking things up in the DOM. Thankfully, everything here has had rock-solid support for years.

Creating Nodes

If we want to add a node to the DOM, we must first create it. To do that, we just use methods of that document object.

To create an element, we use document.createElement, passing it the tag name of the element we want to create.

var paragraph = document.createElement('p');

It's just as easy to create a text node: this time we use the document.createTextNode:

var text_node = document.createTextNode("Put your text here");

Once you've created your nodes, you'll want to put them into the DOM. Let's see how!

Adding Nodes to the DOM

Now that you're somewhat familiar with the notion of trees, you'll realise that to insert a node into the tree, you'll have to do so in reference to another node. Think about it for a moment, and you'll see that you describe any insertion positioning in one of two ways:

As the last child element of a given node

As the previous sibling node of a given node

If you want to make your new node the last child of its soon-to-be parent node, use the appendChild method of nodes.

Assume we have the paragraph and text_node elements from above. While they aren't in the DOM yet, their DOM incarnations would look like this, respectively:

and Put your text here.

Example 5.7

//

var paragraph = document.createElement("p"),

textNode = document.createTextNode("This is some text");

paragraph.appendChild(textNode);

document.getElementById("container").appendChild(paragraph);

Now, the HTML will look like this:

As you can see, this works for both text nodes and element nodes. To insert the text node we've created into the paragraph element node, we just use appendChild. We then use the same method to insert the paragraph into the DOM. This will make the paragraph appear on the page.

If you don't want your node appended as the last child of its parent, you'll have to get a reference to a child node you want it inserted before. Then, use the insertBefore method. Here's how we would insert another text node into our paragraph above, before the text node that's currently alone:

Example 5.8

//

var newTextNode = document.createTextNode("Hello World!"),

container = document.getElementById("container"),

textNode = container.firstChild;

container.insertBefore(newTextNode, textNode);

Of course, this works for elements nodes as well.

Removing Nodes

When working with the DOM, it's all give and take. This means you'll occasionally want to remove elements from the DOM.

Removing elements is a bit trickier than adding them; it makes sense that you need to know about the nodes surrounding your node to put it into the DOM. However, shouldn't you be able to just remove an element without worrying about where it is? That's unfortunately not the case. You need to know the element you want to remove and its parent.

the_parent.removeChild(child_to_remove);

Because of this, you'll probably see this a lot:

Example 5.9

//

var child = document.getElementById("kill_me");

child.parentNode.removeChild(child);

Get the child, and use its parentNode property to find the parent; then, remove the child you started with. Ah, well; that's the DOM for