Chapter 16. Dynamic HTML: Changing Web Pages On-the-Fly

Much of JavaScript is all about making your web pages "come alive ," and in this chapter we're going to focus on that, using a variety of dynamic effects to change your web pages on-the-fly. Here's an overview of the techniques we'll see here:

Changing visual properties on-the-fly
Rewriting documents with the document.write method
Using the insertAdjacentHTML and insertAdjacentText methods
Rewriting documents with the innerHTML , innerText , outerHTML , and outerText properties
Creating new elements
Rewriting documents with text ranges
Moving elements using Netscape Navigator layers
Setting element visibility on-the-fly
Adding visual effects with filters
Using Internet Explorer visual transitions
Changing pages with dynamic styles
Drawing graphics with Vector Markup Language (VML)
Using Internet Explorer Direct Animation

Many of these topics are part of what's been called Dynamic HTML , which has become a catch-all term for dynamic visual effects. There's a lot to Dynamic HTML, and we'll take a look at this topic in this and the next chaptersome of which we've already seen, most of which we haven't.

The W3C hasn't gotten around to standardizing Dynamic HTML yet; you can find what W3C has to say about Dynamic HTML at www.w3.org/DOM, and here it is:

"Dynamic HTML" is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. W3C has received several submissions from members companies on the way in which the object model of HTML documents should be exposed to scripts. These submissions do not propose any new HTML tags or style sheet technology. The W3C DOM WG is working hard to make sure interoperable and scripting-language neutral solutions are agreed upon.

That's as far as W3C has gotten in this area, however, which means that the browser manufacturers have been free to develop in different directions. And they have. The Dynamic HTML implementation in the Internet Explorer is far larger than what you'll find in the Netscape Navigator, for example. I'll take a look at what Dynamic HTML means in the Internet Explorer first, and then take a look at what it means in the Netscape Navigator.