Adding elements to the DOM

Home

Here

Adding elements to the DOM

Adding a new element to a document is very logical. The first step is to create the node (element) you wish to append, the next is to find where you wish to append it within the document, and the final step is to actually do the appending. A node is the representation of either a piece of text or a tag and its attributes in the DOM, and will be referred to often on this tutorial. The syntax for creating a node is very simple - you just call a method of the document object. To create a text node, we use the createTextNode() method of the document object. document.createTextNode(Text) returns a node with the given text in it. Here is an example use of it:

var txtNode = document.createTextNode("Hello. This is a new node.");

To create a new tag we use the createElement() method of document. To give the new tag attributes, we use its setAttribute() method. For example, to create a node containing an "A" tag and then append the HREF attribute to it, we use the following:

var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');

The above example would create a link pointing to "mypage.htm" (<A HREF="mypage.htm">). Please note that you can name the node anything you want -- we just use link because it makes it easier to identify what the node holds later on. You can also set any attributes on it you wish, not just one. For instance, to add a NAME attribute to the above tag, we would simply add:

link.setAttribute('name', 'myanchor');

to the node, after it was created but before it was appended (we'll discuss how to append it later on).

Once the node you wish to add has been created, you must locate where you wish to append it in the document tree. The document tree is the representation of all tags, attributes, and text (all nodes) in the Document Object Model. To locate the place in the document tree we wish to append our new node to, we have a choice. You may either assign an ID to the place in the document you wish the new node to be inserted, or navigate the document tree by use of children and parents. This will be discussed later. To use an ID to locate where we wish to append our new node we use document.getElementById(). This will return the object (whether it be a DIV, P, SPAN, etc..) with the given ID. For instance, to access the DIV with the ID "myDiv", we would use:

document.getElementById("myDiv")

Later on, we'll show you what method to use to append the new node here.

Example Document Tree If you wish instead to access it via the hierarchy of the document, you must be familiar with the concept of a child and parent. A node is considered to be a child of any node it is nested inside of. Any node with other nodes nested inside of it is considered a parent. For instance, in all valid HTML documents, every tag but HTML should have a parent node, since everything should be nested inside of the HTML tag. The BODY tag will also almost certainly have many children, since their is usually at least one tag or piece of text inside the BODY of the document.

To access a node via the document tree, using children and parents, use document.childNodes[], document.nextSibling[], and document.parentNode[]. For example, if the document being worked with was:

<HTML>
<HEAD>
<TITLE>My Document</TITLE>
</HEAD>
<BODY BGCOLOR="red">
<DIV ID="myDiv"></DIV> </BODY>
</HTML>

We could access "myDiv" by locating the document element (HTML), then finding its second child (BODY), then look for its first child (DIV)

document.childNodes[1].childNodes[0]

OR going an alternate route, we could first locate the document element (HTML) again, but then find its first child (HEAD), then find the next child (BODY), and find its first child (DIV)"

document.childNodes[0].nextSibling.childNodes[0]

Why does the first example, where we use childNodes[1], return the second child, you ask? Well, like all of JavaScript, these properties use 0 to represent their first child node, 1 to represent the second, and so on.

Appending a node to the document

Once we have located the node we wish to append to using one of the above methods, we must decide where we wish to append our new node to it. For example, to append a new text node to the end of a div with an ID of "myDiv", we use:

var txt = document.createTextNode(" This text was added to the DIV.");
document.getElementById('myDiv').appendChild(txt);

Notice how we first create the text node, and store it in a variable named txt. Then we locate the node where we wish to append it (using document.getElementById) and then we append a new child to the DIV, using its appendChild() method. Any node is a valid parameter for appendChild(), not just a text node. We used a text node to show how easy it is once you know the basics. In 2 lines, we just added a new piece of text to a DIV! Here's a working example of adding new text to the end of a DIV:

Click here for example

In the above example, we used appendChild() to append our new node to the DIV. This adds our new node to the end of the DIV, just before its closing tag. If we had wished to add it to the beginning of the DIV, we could have used:

insertBefore(txt,document.getElementById('myDiv').firstChild);

which would insert the new text node at the beginning of the DIV. The second parameter is the node before which you wish to insert the new node. In this case, we use the DIV's first child, meaning that our new node will be inserted just before the first child -- at the beginning of the DIV.

Please keep in mind that you do not have to use a DIV, nor do you need to use a text node... you can add any element to just about any place in the document! Next you will learn how to dynamically change existing elements of the document -- starting with Hiding & Showing nodes dynamically.

Hiding/ showing elements