Javascript development pages

Javascript Tutorial -- Rewriting Your Web Pages On-the-Fly with innerHTML

Everything you have learned up to this point has been setting the stage for this lesson and the following lessons. We've discussed the basic concepts behind the Javascript programming language, and learned many of the same data and control structures that you would find in any other language. With this lesson, however, we begin learning how to do fun stuff with Javascript: dynamically changing the text displayed in a web browser, dynamically updating images, changing the Cascading Style Sheets used to render a web page on-the-fly, searching for plugins installed in the user's web browser, and finally some basic AJAX. Let's get started!

When I was working on the senior project for my Computer Science degree, I decided to create a CGI-based web page using Perl (which I had never used before). At that time, the ability to write a Perl script to dynamically generate a web page was very, very cool to me. Sure, lots of other people had been doing it for a long time, but it was new to me, and when my first Perl/CGI script ran, I was in awe at the possibilities that opened up before me with my simple script.

Since then, web sites like Amazon.com, E-Bay, and of course, the heavy-weight, Google Maps have raised the bar and redefined the state-of-the-art in user responsiveness. It's no longer good enough to refresh an entire web page when a user submits a comment or updates a shopping cart. Now, a competitive web site must dynamically show updates without refreshing the whole page.

Fortunately, Javascript has a few tricks up its sleeve to do this, and the first one we will show you is the "innerHTML" method. If you recall, in Lesson 17, we introduced the concept of naming an HTML tag with an "ID" attribute, like this:

        <input type="text" id="name">

What we didn't tell you then is that not just <input> or "select" tags can be named with an "ID" attribute; any HTML tag can be. For example, this...:

        <p id="fred">

...is perfectly legit (but why you would want to name a tag "Fred" is beyond me). Now suppose you had some text between the and tag. And further suppose you wanted to change that text in response to user input. This is exactly what the "innerHTML" attribute will let you do -- if you have an HTML tag that has both an opening tag and a closing tag, like and or like and -- but not like , since there is no tag -- then the innerHTML method will let you replace the text between the opening and closing tags with the text (only! no HTML) of your choice. Here's how it works:

        <script type="text/javascript"
          <!--
            function ChangeMe()
              {
                if (document.getElementById('changeme').innerHTML == 'Hello!')
                  {
                    document.getElementById('changeme').innerHTML = 'Hola!'
                  }
                else
                  {
                    document.getElementById('changeme').innerHTML = 'Hello!'
                  }
              }
          //-->
        </script>
        <body>
          <p id="changeme"Hello!</p>
          <input type="button" onClick="ChangeMe()" value="Click Me!">
          ...

Caveats:
* While I have been able to dynamically insert HTML code using the innerHTML method, this is not supported by the standards, and therefore may not always work. To be safe, you should only change plain text with the innerHTML method. We will teach you a better way to add new tags in Lesson 23.
* You can't add new content with this method -- you can only change existing content to say something different. Adding new content will also be discussed in Lesson 23.

Because of these caveats, the innerHTML method is better suited to personalizing greetings, updating totals in a shopping cart, or other applications where you have a fixed layout and you wish to change a portion of the content in response to user input rather than, for instance, posting a user's comments in a web forum.

Here is a sample script that uses the code in the example above to demonstrate the innerHTML method.