| Microsoft Office 2000/Visual Basic Programmer's Guide | |
To understand how to create and work with dynamic content in a Web page, you need to know how to identify and manipulate the specific objects on the page. In the previous section, you learned to use the id property to uniquely identify an object on a page. In this section, you will learn how to use the <DIV> and <SPAN> tags to turn any part of a page, portion of text, or part of another object into an object. You will also learn about the handful of properties and methods you will use to manipulate the content of an object.
<DIV> and <SPAN> Tags
Most HTML element tags have a very specific purpose. For example, the <IMG> image tag embeds an image or video clip in a page, the <A> anchor tag designates a hyperlink, and the <P> paragraph tag designates a paragraph. Each of these tags represents an object on a Web page. The <DIV> and <SPAN> tags, on the other hand, are container tags that you can use to create objects out of any other HTML element or content on a page. The difference between <DIV> and <SPAN> is simply that the <DIV> tag forces a break in the flow of the page structure and the <SPAN> tag does not. Therefore, you use a <DIV> tag to set off any arbitrary part of the page as an object, and you use a <SPAN> tag to designate any arbitrary inline part of the page as an object.
An example will highlight the difference between these tags and illustrate how they can be used. Imagine you create a page containing a display area and some text. The text contains words representing the colors you can use in the display area, and you want the color of the display area to change when the user clicks the words in the text. You would use a <DIV> tag to specify the display area and <SPAN> tags to surround the words in the text that you want to work with as objects. The following HTML sample code illustrates how to use these tags to create DHTML objects:
<BODY>
<H2>Office Programmer's Guide Chapter 12:
<BR> Using Web Technologies
</H2>
<HR>
This page contains a <SPAN id=color1 class=boldBlack>black</SPAN>
square. You can change the color of this square to
<SPAN ID=colorRed CLASS=boldRed>red</SPAN>,
<SPAN ID=colorBlue CLASS=boldBlue>blue</SPAN>, or
<SPAN ID=colorGreen CLASS=boldGreen>green</SPAN>
by clicking the name of the color in this sentence.
<DIV
ID=displayedText
STYLE="BACKGROUND-COLOR: black; HEIGHT: 100px; LEFT: 150; POSITION: absolute;
TOP: 180; WIDTH: 100px">
<SPAN STYLE="COLOR: white">I am text in the box!</SPAN>
</DIV>
</BODY>
The Web page created from this HTML code would look like Figure 12.1.
Figure 12.1 Using <DIV> and <SPAN> Tags to Create Objects on a Page
The <SPAN> and <DIV> tags are extremely useful when you need to create an object you can work with in script from any part of a Web page. You can view the page illustrated in Figure 12.1 by opening the DivSpanSample.htm file in the ODETools\V9\Samples\OPG\Samples\CH12 subfolder on the Office 2000 Developer CD-ROM. For another example that uses this same technique, see RollOverSample.htm in the same subfolder.
You can use certain properties and methods of DHTML objects to determine or specify the text or the HTML code the object contains. The properties you will use most often are the innerText, outerText, innerHTML, and outerHTML properties. The methods you will use most often are the insertAdjacentText, insertAdjacentHTML, and createTextRange methods.
Important Changes you make to a page by using these properties and methods do not change the HTML code for a page as it exists on disk. They only change the HTML code as it exists in the browser. If the page is refreshed, the page's original HTML code is used to redisplay the page.
The innerText and outerText properties return the same information and so operate the same when you are trying to identify the text contained within an HTML element. The difference between the two properties appears when you set them. The innerText property replaces the text between the opening and closing element tags of an object. For example, replacing the innerText property of the para1 object changes the HTML code in the page as follows:
document.all("para1").innerText = "I am the new text!"
' The preceding line changes the HTML code for the para1 object as follows:
' Original HTML code
<P ID=para1>Old innerText is here.</P>
' New HTML code
<P ID=para1>I am the new text!</P>
The outerText property replaces the text and the HTML tags surrounding the text. For example, replacing the outerText property of the para1 object changes the HTML code in the page as follows:
document.all("para1").outerText = "I am the new text!"
' The preceding line changes the HTML code for the para1 object as follows:
' Original HTML code
<P ID=para1>Old innerText is here.</P>
' New HTML code
I am the new text!
In the preceding example, not only is the text replaced, but also the original para1 object is removed from the HTML code in the page. Although there may be times when this is useful, you will typically use the innerText property and leave the surrounding element tags intact. For an example that illustrates the differences between these properties, see the InnerAndOuter.htm file in the ODETools\V9\Samples\OPG\Samples\CH12 subfolder on the Office 2000 Developer CD-ROM.
You use the insertAdjacentText method to add to the existing text in an element. This method uses two arguments to specify where text should be inserted. The first argument, sWhere, uses a constant to specify where the new text should be inserted: before the element itself (beforeBegin), before the existing text in the element (afterBegin), at the end of the existing text (beforeEnd), or after the element itself (afterEnd). The second argument, sText, is the new text to insert. For an example that illustrates the effect of adding text to an element by using each of the four described constants, see the InsertAdjacent.htm file in the ODETools\V9\Samples\OPG\Samples\CH12 subfolder on the Office 2000 Developer CD-ROM.
You can also use the textRange object to work with the text in certain elements in a Web page. The textRange object represents text in an HTML element. You create a textRange object by using the createTextRange method. For more information about the textRange object, look up the object and its related method in the "Objects" section of the "Document Object Model Reference" in the C:\Program Files\Microsoft Visual Studio\Common\IDE\IDE98\MSE\1033\Htmlref.chm file.
Note The path to the Htmlref.chm Help file reflects the language ID folder (1033) for U.S. English language support in Office. The language ID folder below C:\Program Files\Microsoft Visual Studio\Common\IDE\IDE98\MSE differs for each language.
You use the innerHTML property to work with the HTML-formatted text inside an object. You use the outerHTML property to work with the HTML tags of the object itself. For example, the following VBScript code uses the innerHTML property to change the text in the para1 object so that the word "this" appears as bold text instead of italic text:
document.all("para1").innerHTML = "I am the text in <B>this</B> element."
' The preceding line changes the innerHTML for the para1 object as follows:
' Original HTML code
<P ID=para1>I am the text in <I>this</I> element.</P>
' New HTML code
<P ID=para1>I am the text in <B>this</B> element.</P>
The next example replaces the outerHTML property of the para1 object, and actually changes the element from a paragraph to an image, while keeping the para1 ID attribute setting:
document.all("para1").outerHTML = _
"<IMG ID=para1 SRC='picture.gif' WIDTH=150 HEIGHT=200>"
' The preceding line changes the outerHTML for the para1 object as follows:
' Original outerHTML
<P ID=para1>Old innerText is here.</P>
' New outerHTML
<IMG ID=para1 SRC='picture.gif' WIDTH=150 HEIGHT=200>"
If you add a new element by using the outerHTML property, the element that is replaced is no longer a part of the page. If that element was identified by an id property and referenced by other script in the page, the script will no longer work. You will typically use the innerHTML property and leave the surrounding element tags intact. For an example that illustrates the differences between these properties, see the InnerAndOuter.htm file in the ODETools\V9\Samples\OPG\Samples\CH12 subfolder on the Office 2000 Developer CD-ROM.
You use the insertAdjacentHTML method to add to the existing HTML code in an element. The method uses two arguments to specify where HTML code should be inserted. This method works in exactly the same way as the insertAdjacentText method discussed in the previous section, "Working with Text," only you use it to add HTML code instead of text to an element. To see how the different arguments work, see the discussion of the insertAdjacentText method in the previous section.