Handling Text in the Page Designer

See Also

Text replacements are a frequent operation in many Visual Basic applications. Often you want to change the text displayed in a form element in response to a user event. In forms-based Visual Basic applications, you usually do this by setting the Text property of the control in question.

For the HTML pages in a DHTML application, text replacements are handled differently than they are on forms. It is important to remember that a standard text element in an HTML page consists of both a set of tags and of text that is embedded between them. For example, the following is the HTML for a typical heading element on a page:

<H3 ID=Subhead1>My Heading</H3>

The <H3> and </H3> tags tell the browser how to format and display the text "My Heading." The ID=Subhead1 portion is an attribute that assigns a unique ID to the heading and makes it programmable.

When you want to make changes to text on an HTML page, you must specify whether you are replacing it with straight text or text that includes additional HTML tags. Additionally, you must indicate whether the original tags for the element should be affected by the replacement. You do this with two sets of properties: innerText and outerText, and innerHTML and outerHTML.

Changing Text Within HTML Tags

To change text within HTML tags, use the innerText or innerHTML properties. These properties both replace the existing text without changing the tags around the text. They differ in how the system processes them:

innerText provides changes that the system inserts as straight text, without performing any parsing.
innerHTML provides text replacements and additional HTML tags that must be parsed and inserted between the original tags.

The following table shows how you would use the innerText and innerHTML properties to change an element:

	Using innerText	Using innerHTML
Original HTML for the element	<H3 ID=Subhead1>My Heading</H3>	<H3 ID=Subhead1>My Heading</H3>
Replacement code	`Subhead1.innerText="Heading One"`	`Subhead1.innerHTML="<I>Heading One</I>"`
Resulting HTML	<H3 ID=Subhead1>Heading One</H3>	<H3 Subhead1><I>Heading One</I></H3>
Element displayed in browser	Heading One	*Heading One*

Replacing Text and Tags

To change both the text and the original tags around an element, you can use two properties called outerText and outerHTML. Both properties replace the text enclosed in the HTML for a specific element and the element tags themselves. Like innerText and innerHTML, they differ in terms of how the system processes them:

outerText provides changes that the system inserts as straight text, without performing any parsing. This text replaces the entire original element, including its HTML tags.
outerHTML provides text replacements and additional HTML tags that must be parsed and inserted in place of the original tags.

The following table shows how you would use the outerText and outerHTML properties to replace the original element with text alone or text and tags:

	Using outerText	Using outerHTML
Original HTML for the element	<DIV><H3 ID=Subhead1>My Heading</H3></DIV>	<H3 ID=Subhead1>My Heading</H3>
Replacement code	`Subhead1.outerHTML=Heading Two`	`Subhead1.outerHTML= <P ID=Newpar><U>Heading Two</U></P>`
Resulting HTML	Heading Two	<P ID=Newpar><U>Heading Two</U></P>
Element displayed in the browser	Heading Two	Heading Two

If you use OuterHTML to change the ID for an element, any Visual Basic code you wrote for events on the old element ID will no longer work. You must either copy your old code to the appropriate procedures for the new element ID, or leave the ID unchanged.

Note In addition to replacing text, you can append text to an existing element with the insertAdjacentHTML property.

For More Information See "Properties" in the Document Object Model section of the Internet Client SDK for more information on how to use innerText, outerText, innerHTML, outerHTML, and insertAdjacentHTML.