DHTML Web page elements have four runtime properties that enable you to manipulate
the page’s underlying HTML and thus the attributes and contents of the object
as displayed on the Web page:
-
OuterHTML represents all the HTML
tags and text used to define an object, including the outer HTML tags that define
the object as an entity on the page, such as <P>…</P>
tags. The contents of the first member of the <P>…</P>
tag pair also includes important information such as extended formatting
instructions for the object and, most importantly, the object’s ID that
you assigned in the DHTML Page Designer. If you replace OuterHTML without repeating
the ID, you will effectively destroy the object’s ID, making it impossible
to manipulate the object in code afterward during the same session.
-
OuterHTML is most useful if you
want to examine all the HTML that goes into the definition of the object.
-
InnerHTML refers to inner HTML
tags and text. In other words, InnerHTML doesn’t
include the HTML tags and formatting instructions in the element’s
<P>…</P> pair. If you assign an element’s
InnerHTML property, you will replace inner HTML tags and text inside the
element’s outer HTML tags with new inner tags and text.
-
InnerText represents the text inside
all HTML tags. If you assign an element’s InnerText
property, you will replace the inner HTML tags and the text inside the
element’s HTML tags with straight text. Existing outer HTML tags will be
left untouched.
-
OuterText represents the text and
any carriage returns supplied by the outer HTML tags.
To illustrate the use of these properties, assume that you have placed a Paragraph
element with ID CustomerSurvey on the Designer surface
and typed as its text Customer Survey. Further assume
that you have used the DHTML Page Designer’s toolbar to assign it a font
of Courier, a font size of 4, and to make it appear in bold and italic.
The four properties would then have the following characteristics:
-
The OuterHTML property would include all the HTML
tags that identify the object, and might look like this:
<P id=CustomerSurvey style="BORDER-BOTTOM-STYLE:
double;
BORDER-LEFT-STYLE: double; BORDER-RIGHT-STYLE: double;
BORDER-TOP-STYLE: double; COLOR: #ff00ff; FONT-FAMILY:
serif"><STRONG><FONT face="Courier" size=4><EM>Customer
Survey</EM></FONT></STRONG></P>
-
The InnerHTML property might look like this:
<STRONG><FONT face="Courier" size=4><EM>Customer
Survey</EM></FONT></STRONG>
-
The OuterText property would include the contents
of InnerText, and a carriage return.
-
The InnerText property would include just this:
Customer Survey
You will find that InnerHTML and
InnerText are the most useful properties of the four if you want to hange
attributes.
To follow the preceding example, the line of code
CustomerSurvey.InnerText = "Client Survey"
would destroy all existing inner tags and text and replace them with the simple
text, "Client Survey".
The line of code
CustomerSurvey.InnerHTML = "<U>Client Survey</U>"
would destroy all existing inner tags and text and replace them with the HTML
tags and text
"<U>Client Survey</U>".
Note that if you attempted to assign HTML tags and text to the
InnerText property, the tags would end up displaying as literal text.
