Using Dynamic HTML Properties to Update Part of a Page

Each item in a Web page supports these dynamic HTML properties:

innerText: Lets you change the text between the start and end tags of an element. (innerText is not supported by Mozilla, Netscape, or Firefox browsers.)
outerText: Lets you change all the element’s text, including the start and end tags. (outerText is not supported by Mozilla, Netscape, or Firefox browsers.)
innerHTML: Changes contents of element between start and end tags and can include HTML.
outerHTML: Changes contents of an element, including start and end tags, and treats text as HTML.

You’ve already seen innerHTML at work throughout the book, as you wrote applications that updated a <div> element with downloaded data:

 <html>   <head>     <title>An Ajax demo</title>     <script language = "javascript">       var XMLHttpRequestObject = false;       if (window.XMLHttpRequest) {         XMLHttpRequestObject = new XMLHttpRequest();       } else if (window.ActiveXObject) {         XMLHttpRequestObject = new           ActiveXObject("Microsoft.XMLHTTP");       }       function getData(dataSource, divID)       {         if(XMLHttpRequestObject) {           var obj = document.getElementById(divID);           XMLHttpRequestObject.open("GET", dataSource);           XMLHttpRequestObject.onreadystatechange = function()           {             if (XMLHttpRequestObject.readyState == 4 &&               XMLHttpRequestObject.status == 200) {                 obj.innerHTML =                   XMLHttpRequestObject.responseText;             }           }           XMLHttpRequestObject.send(null);         }       }     </script>   </head>   <body>     <H1>An Ajax demo</H1>     <form>       <input type = "button" value = "Fetch the message"         onclick = "getData('data.txt', 'targetDiv')">     </form>     <div >       <p>The fetched message will appear here.</p>     </div>   </body> </html>

You can also use the innerText property to set the inner text of an element, rather than rewrite it entirely. The example, innerText.html, lets you rewrite the text of an <h1> header element. You start with the header this way, giving it the ID header and connecting it to a function named changeHeader:

 <body>     <center>         <h1 id = "header"           onclick = "changeHeader()">           Changing text on the fly         </h1>         Click the above header to make it change.     </center> </body>

Then, in the changeHeader function, you use the header’s innerText property to change the text in the header, while leaving the header and <h1> header (that is, its HTML doesn’t change):

 <head>     <title>         Changing text on the fly     </title>     <script language = "JavaScript">      function changeHeader()      {        var header = document.getElementById("header");        header.innerText = "Here is the new text";      }     </script> </head>

You can see the results in Figure 11.15, which is the innerText.html page.

image from book
Figure 11.15: The innerText.html application

When you click the header, its text changes, as shown in Figure 11.16.

image from book
Figure 11.16: Replacing text in the innerText.html application

You could have used the innerHTML property instead to insert text that the browser will interpret as HTML. For example, you might use the (Internet Explorer–only) <marquee> element to display the new text in the header in a horizontally scrolling marquee:

 <html>     <head>         <title>             Changing text on the fly         </title>         <script language = "JavaScript">          function changeHeader()          {            var header = document.getElementById("header");            header.innerHTML =            "<marquee>This is a new marquee</marquee>"          }         </script>     </head>     <body>         <center>             <h1 id = header               onclick = "changeHeader()">               Changing text on the fly             </h1>             Click the above header to make it change.         </center>     </body> </html>

You can see the results in Figure 11.17, the innerHTML.html page, where the new text is scrolling in a horizontal marquee.

image from book
Figure 11.17: The innerHTML.html application

If you wanted to, you could replace the <h1> header entirely with the outerHTML property. Here’s an example, outerHTML.html, which replaces the <h1> header with an <h3> header:

 <html>     <head>         <title>             Changing text on the fly         </title>         <script language = "JavaScript">          function changeHeader()          {            var header = document.getElementById("header");            header.outerHTML =            "<h3>This is the new header</h3>"          }         </script>     </head>     <body>         <center>             <h1 id = header               onclick = "changeHeader()">               Changing text on the fly             </h1>             Click the above header to make it change.         </center>     </body> </html>

You can see the results in Figure 11.18, the outerHTML.html page.

image from book
Figure 11.18: The outerHTML.html application

When you click the header, it is rewritten as an <h3> header, as shown in Figure 11.19.

image from book
Figure 11.19: Replacing text in the outerHTML.html application

Another way to update part of a page in Internet Explorer is through the use of text ranges, which is discussed in the next section.