The innerHTML , innerText , outerHTML , and outerText PropertiesOne of the most precise ways to rewrite a web page is with the innerHTML , innerText , outerHTML , and outerText properties. (See "The innerHTML , innerText , outerHTML , and outerText Properties" in Chapter 5, "Using Core HTML Properties.") Here's what those properties do. Note that innerHTML is the only one supported by Netscape Navigator so far:
The innerHTML property (available in NS6+ and IE4+) has been our constant companion throughout the book. We've used it to display the results of a script in a <DIV> or <SPAN> element, but it's important to mention it in our Dynamic HTML chapters. Here's an example that shows how to use the onchange event in a text field: (Listing 16-05.html on the web site)<HTML> <HEAD> <TITLE>Using the onchange Event</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function displayText() { document.getElementById("div1").innerHTML = "The text field holds: " + document.form1.text1.value } //--> </SCRIPT> </HEAD> <BODY> <H1>Using the onchange Event</H1> <FORM NAME="form1"> <INPUT TYPE="TEXT" NAME="text1" ONCHANGE="displayText()"> <BR> <DIV ID="div1"> </FORM> </BODY> </HTML> Here's an example using the outerHTML property in the Internet Explorer, which enables you to rewrite the HTML for an element entirely. In this case, I'm changing an <H1> header to a scrolling <MARQUEE> element when the user clicks that header: (Listing 16-06.html on the web site)<HTML> <HEAD> <TITLE> Using the outerHTML Property </TITLE> <SCRIPT LANGUAGE = "JavaScript"> <!-- function rewriteHeader() { h1.outerHTML = "<MARQUEE BGCOLOR='cyan' STYLE='font-size:54;text-decoration: underline'>" + "Here's the new marquee!</MARQUEE>" span1.innerText = "You changed the header." } //--> </SCRIPT> </HEAD> <BODY> <H1 ID="h1" ONCLICK="rewriteHeader()">Using the outerHTML Property</H1> <SPAN ID="span1">Click the header to change it to a marquee</SPAN> </BODY> </HTML> You can see the results in Figure 16.4. Figure 16.4. Using the outerHTML property.
|