Using Text Ranges

Another way to modify a web page in the Internet Explorer on-the-fly is to use a TextRange object, which we saw in Chapter 11, "Working with HTML Text Elements." In this chapter, I'll take a look at the pasteHTML method, which enables you to change text ranges on-the-fly. Here's an example in which I create a text range with the createTextRange method, select the text of an element ("No problem.") with the moveToElementText method, and replace that text with the pasteHTML method (to "No worries!"):

(Listing 16-07.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using Text Ranges          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function replaceText()   {   if(document.body.isTextEdit){   var range = document.body.createTextRange()   range.moveToElementText(div1)   range.pasteHTML("No worries!")   }   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using Text Ranges</H1>          <INPUT TYPE=BUTTON VALUE="Click Me!" ONCLICK="replaceText()">          <BR>          <BR>          <DIV ID="div1" STYLE="font-family:Arial, sans-serif; font-weight:bold">              No problem.          </DIV>      </BODY>  </HTML>

You can see the results in Figure 16.5. As you can see, text ranges provide you with another way to rewrite web page content on-the-fly.

Figure 16.5. Using the `pasteHTML` method.

graphics/16fig05.gif

(Listing 16-07.html on the web site)

Figure 16.5. Using the pasteHTML method.

Figure 16.5. Using the `pasteHTML` method.