Adding DOM Elements

In the previous pages looking at selecting DOM elements, we changed the content of the DOM but did not add new elements. Javascript will let us do that although it does take a number of stages to arrive at the point where they is something to see in the browser. For example the steps required to add a <p> with some text content are:

  1. Create a new element
  2. Create a new text node
  3. Attach the text node to the new element
  4. Attach the new element to the DOM

Creating a New Element with document.createElement()

To create a new DOM element we use document.createElement for example:

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

Creating a New Text Node with document.createTextNode()

To create a new text node we use document.createTextNode for example:

var myNodeText = document.createTextNode('My paragraph of wise words');

Attaching a Text Node to an Element with appendChild()

To attach a new text node to an element we use appendChild() for example:

myNode.appendChild(myNodeText);

Attaching an Element to the DOM with appendChild()

We can also use appendChild() to add content to the DOM. The following adds the new 'myNode' to the <body> of the document.

document.body.appendChild(myNode)

Where does it put it? The question now is where does this get added to the DOM. In the above example the new node will be added to the end of the <body>.

You can see the result in this demo. The new text node is added right at the bottom outside the container <div> but before the closing </body>

Obviously that is not always what we want so we can target where in the DOM to add content using selectors ie:

document.getElementById('mainContent').appendChild(myNode);

Now we have a more sensible demo.

Using insertBefore()

Targeting an element with a selector gives us more control but adding content to the end of a node with appendChild() is not always the result we want. We therefore also have insertBefore(). We need 3 bits of information for insertBefore() - the parentElement where we want new node added, the new node itself and then the node we want the new node placed before (phew).

parentElement.insertBefore(newElement, beforeElement)

This will insert the content before the selected node for example:

document.getElementById('mainContent').insertBefore(myNode, document.getElementById('cheese'));

... and here is the demo.

Setting Attributes with setAttribute()

As well as amending the HTML we can amend the CSS used in the document. The first technique we can use is to use Javascript to add an existing class or id selector to the HTML that references a predefined CSS rule. We can do this with the setAttribute() method.

setAttribute(attributeName, attributeValue)

To change the CSS we simply set the class attribute for the targeted element to add a new class.

document.getElementById('myNode').addEventListener('click', function(){
	document.getElementById('cheese').setAttribute('class', 'highlight');
});

Here is a demo.

We can obviously use any appropriate HTML attributes and values. For example a classic Javascript image rollover can be built with:

document.getElementById('myPic').addEventListener('mouseover', function(){
		document.getElementById('myPic').setAttribute('src', 'images/white-flowers.jpg');
})

Here is a demo. A fuller rollover would include a mouseout event ie:

document.getElementById('myPic').addEventListener('mouseover', function(){
		document.getElementById('myPic').setAttribute('src', 'images/white-flowers.jpg');
})
document.getElementById('myPic').addEventListener('mouseout', function(){
		document.getElementById('myPic').setAttribute('src', 'images/pink-flowers.jpg');
})

Here is a demo.

Following on from our earlier discussion of events this rollover examples lends itself nicely to the use of ev.target ie:

document.getElementById('myPic').addEventListener('mouseover', function(ev){
		ev.target.setAttribute('src', 'images/white-flowers.jpg');
})
document.getElementById('myPic').addEventListener('mouseout', function(ev){
		ev.target.setAttribute('src', 'images/pink-flowers.jpg');
})

Here is a demo.

Removing Attributes with removeAttribute()

We can also remove attributes with removeAttribute(). ie

ev.target.removeAttribute('class');

With the hasAttributes() method we can check to see if an attribute exists and toggle it:

document.getElementById('myNode').addEventListener('click', function(ev){
	if(ev.target.hasAttribute('class')){
		ev.target.removeAttribute('class');
	}else{
		ev.target.setAttribute('class', 'highlight');
	}
});

Here is a demo.

We've got style

The other technique we could use for adding CSS is the style attribute. This will add an inline CSS style to the targeted node.

document.getElementById('myNode').addEventListener('click', function(){
	document.getElementById('cheese').style.padding = "15px";
});

and here is the demo.

Tip: Those CSS properties that include have hyphens need to put into camel case ie background-color becomes backgroundColor.

Leave a Reply

*