An Introduction to Dynamic HTML with Javascript

How to Add Dynamic Content to a Web Page Using Javascript

Oct 23, 2008
Mark Alexander Bain

Dynamic HTML using Javascript - Mark Alexander Bain

This article show how to add dynamic content to a web page by using just a little bit of Javascript.

Every web page in the world uses HTML (the Hyper Text Markup Language) - it's a formatting language that tells a web browser whether the contents of a web page should be in bold, large or small, tabulated or in paragraphs. However, HTML is a static language - once it's been loaded into a web page then it won't change; unless, of course, it's Dynamic HTML.

Dynamic HTML works because of the fact that when web page is viewed in a web browser (such as Microsoft Internet Explorer or Mozilla Firefox) it is not just formatted text - it is actually a set of objects, a set of objects that can be manipulated using a programming language such as Javascript; and the most important of the objects to is the document.

Using Javascript to Work with a Web Page Document

The document is the web page itself, and with Javascript it is possible to modify the title of the web page:

document.title = "A Dynamic Web Page";

The contents of that web page can also be created by using Javascript code; for instance the web page can be written to by using the document's write method:

//Create a heading

document.write ("<h1 id=h1>Hello World</h1>");

//Create a paragraph with text in it

document.write ("<p id=p1>This is a dynamic web page.</p>");

//Create an empty paragraph

document.write ("<p id=p2></p>");

This code actually creates some additional objects (h1, p1 and p2) and they can now be accessed using Javascript code.

Accessing Objects within a Web Page Document

Each object that's created must be given a unique ID, and once that has been done then each object can be accessed using the document's getElementById method; for example, the code above creates an empty paragraph (p2) - the contents of that paragraph can be changed by using the getElementById method to access the paragraph and then updating it's innerHTML property:

var p2 = document.getElementById ('p2');

p2.innerHTML = "Isn't this exciting?";

Dealing with Events in a Dynamic Web Page

Each object in a web page has a number of events associated with it - these events are things such as:

onmouseover - this event occurs when the mouse pointer is placed over an object
onmouseout - the mouse pointer is moved away from an object
onclick - the user has clicked on an object

These events can then be used to run Javascript functions - in this example the text in a paragraph changes color and is displayed in a second paragraph:

<p id=p3

onmouseover="overme('p3')"

onmouseout="away('p3')"

>An example of a web page event</p>

var p4 = document.getElementById('p4');

function oversee(me) {

var object = document.getElementById(me);

object.style.color = "blue";

p4.innerHTML = "Your mouse is over '" + object.innerHTML + "'";

}

function away(me) {

var object = document.getElementById(me);

object.style.color = "black";

p4.innerHTML = "";

}

</script>

Conclusion

Dynamic HTML using Javascript is not difficult to implement, but those simple techniques can produce an impressive web page - something much more interesting than just boring old static HTML.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...