Replacing Page Content

Because DHTML is so good at manipulating page content in real time, you can pull off some pretty cool tricks by marking off sections of a document with one of IE 4.0's special callouts, which include: innerTEXT, innerHTML, outerTEXT, and outerHTML.

These four properties work similarly. The TEXT varieties will take any content and strip out the HTML, rendering only the text. The HTML varieties respect the input's HTML. The inner and outer varieties control whether you're referencing content inside or outside the specified element. Let's use innerHTML to change part of a page based on some form input. This example, as written, requires no other JavaScript or CSS declarations to work.


This sentence is about to change, depending on what the user types in to the text box.

<div id=ThisWillChange>This sentence is about to change,
depending on what the user types in to the text box.
<input id=TextField type=text style="width:550">
<input type=button value="Click me to change"
innerHTML = TextField.value">

The innerHTML property says whatever appears on the page as HTML content between the start and close of the referenced ID will be affected by the operation. In this case, it's replaced by a value the input form returns. If a user includes HTML code in her input, the output will be rendered accordingly. Change the property to innerText and the same output will display the HTML code along with the output. Hint: This is a good start toward building an interactive HTML tutorial: Users can type in code, click on a button, and see the results instantly.

css linking styles

Back To Top
© 1998 - 2024
Version 7.21 | Advertise on this site