Changing an Object's Content Another important method for making changes to a Web page without having to reload the page is to use the innerHTML property. This allows you to replace or add to the current content within an object, including text and HTML tags. Not only can you change content (for example, changing a layer's visibility), but you can also react to input from the userfor example, from a form field. This can be an amazingly powerful technique, which forms the basis of a lot of Ajax techniques for updating pages on the fly. In this example (Figures 16.13 and 16.14), the name typed into a form field is printed on the page without the form actually ever being submitted to the server. Figure 16.13. Initially the message is to enter your name. 
Figure 16.14. After you enter text and click the link, the message is changed without reloading the page or changing the visibility of layers by changing the content of the element. 
To change the content of an element: | | 1. | function writeName() {...}
Add the function writeName() to your JavaScript (Code 16.8).
Code 16.8. The function writeName() is just one way to use innerHTML to change the content of a layer using input from a form field.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Changing the Content After Loading</title> <script type="text/javascript"> <!-- function writeName(objectID) { var object = document.getElementById(objectID); var userName = document.getElementById ('yourName').value; object.innerHTML = '<h1>Hello <i>' + userName + '</i>!</h1><img src="/books/3/292/1/html/2/alice09a.gif" alt="Alice" width="278" height="312" />' } // --> </script> <style type="text/css" media="screen"> h1 { color: red; font-size: 3em; } input {font:bold 1.5em Arial, Helvetica, sans-serif; border: 2px solid black;} </style> </head> <body> <div >What is your Name? <input type="text" size="30" /> <a onclick="writeName('response'); return false;" href="#">Tell Me</a></div> </body></html>
|
This function first looks in the form field yourName to get its content and assigns it to the variable userName, and then uses that variable, combined with other text and HTML tags, to change the content of the object named response by means of the innerHTML property:
object.innerHTML = '...'
| 2. | <input type="text" size="30" />
Add the input field that is queried by the function from Step 1.
| | | 3. | onclick="writeName();"
Add an event handler to trigger the writeName() function from Step 1. You could use any element you want, including a form button, but I chose to use a link.
For simplicity in this example, I left out the <form> tag, so we are not restricted to using the form button and having to override its default action.
| 4. | <div >...</div>
Set up the object whose content you'll be changing, making sure to give it a unique ID. You can enter the initial content for the object or simply leave it empty to fill in later.
|
 Tips
One shortcoming of this technique is that it is not a part of the W3C DOM specification, but was created by Microsoft for Internet Explorer 4+. The good news is that most browsers, such as Mozilla browsers (including Firefox), Opera, and Safari, are also supporting the method. If you simply want to add to the current content in a layer without replacing it, you can just use += rather than = to assign the values. The new content is added after the current content of the layer.
|
