Tutorial 2: Manipulating the DOM

This tutorial will teach you how to manipulate the DOM from JavaScript. Knowledge of how to access the DOM from JavaScript is assumed. There are five short lessons, followed by one exercise.

It is highly recommended that you open your browser's JavaScript console now. When stuff doesn't work, there's usually an error printed in the console. The console is your friend.

Lesson 1: innerHTML

The simplest way to to change the DOM is to assign some HTML to an element's innerHTML^[?] property. This will erase the element's current content and replace it with your own.

E.g. element.innerHTML = 'Hello<br>World'

Here is a span which contains some text and an image: Wish upon a

This is the DOM tree for the above span:

<span id="field">
┣ Wish upon a
┗ <img src="star_off.gif">
</span>

Write some JavaScript code below that removes both the text and the star, and replaces them with a star that's 'on'. There is a 'star_on.gif' image on this server.

Sample solution document.getElementById('field').innerHTML = '<img src="star_on.gif">';

Lesson 2: removeChild

In the previous lesson we used innerHTML. Never use innerHTML again. Although it is simple, fast and convenient, it opens a boat load of security holes, both obvious and subtle. Trust us. The rest of this tutorial will examine the more complicated, but safe alternative.

Since destroying something is easier than building something, let's start by destroying a node. Every node has a method removeChild^[?] that takes as an argument the node that is to be destroyed. Note that this method needs to be called on the offending node's parent.

E.g. node1.removeChild(node2)

Here is a span which contains some text and an image: Shooting

This is the DOM tree for the above span:

<span>
┣ Shooting
┗ <img id="fallenstar" src="star_on.gif">
</span>

Write some JavaScript code below which deletes the star.

Sample solution

var star = document.getElementById('fallenstar');

        star.parentNode.removeChild(star);

Lesson 3: appendChild

Nodes may be added as children of another node with the appendChild^[?] method. This method is called on the new parent and takes the child as its argument. If the child you are appending is an existing element in the DOM, it will be automatically removed from its existing location. Any grandchildren will follow the child.

E.g. node1.appendChild(node2)

Here is a span which contains some text and an image:

This is the DOM tree for the above spans:

<span>
┣ <span id="source">
┃ ┣ Here's a star:
┃ ┗ <img src="star_on.gif">
┃ </span>
┗ <span id="target">
  ┗ Move it here:
  </span>
</span>

Write some JavaScript code below which moves the star from 'source' to the end of 'target', without changing the text.

Sample solution document.getElementById('target').appendChild(document.getElementById('source').lastChild);

Lesson 4: document.createTextNode

Creating a new text node is easy, use just call document.createTextNode('hello')^[?]

Here is a span which contains a formula: 6 * 7 =

This is the DOM tree for the above span:

<span id="math">
┗ 6 * 7 =
</span>

Write some JavaScript code below which completes the equation.

Sample solution document.getElementById('math').appendChild(document.createTextNode('42'));

Lesson 5: document.createElement

New elements are created by calling document.createElement('SPAN')^[?] with the argument being the element's HTML tag name.

Here is an empty span:

This is the DOM tree for the above span:

<span id="sky">
</span>

Write some JavaScript code below which creates an image, sets its 'src' property to a star, and inserts it into the empty span.

Sample solution

var img = document.createElement('IMG');

img.src = 'star_on.gif';

document.getElementById('sky').appendChild(img);

Exercise: Roller Coaster Text

You now know the API for manipulating a DOM tree. For this exercise, put all these pieces together to write code that takes a string and renders it with undulating font sizes. Each letter should be in its own 'span' tag, and each span's .style.fontSize property starts at '10px' and increases by 5 pixels until the middle of the string is reached, before shrinking back to 10 pixels. Here is an example:

Don't Be Evil.

Below is an empty div with the id 'rollercoaster' which you can append to:

var text = 'Hello World!'; var div = document.getElementById('rollercoaster');

Bonus: Try creating an undulating sine wave or shifting colours.

Use the Intro to JavaScript forum to share your solution to this exercise and see other people's solutions.