August 13, 2000 - Modifying an Element on the Fly | WebReference

August 13, 2000 - Modifying an Element on the Fly

Yehuda Shiran August 13, 2000
Modifying an Element on the Fly
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

You can change an HTML element in Internet Explorer by setting one of the following four properties: innerText, outerText, innerHTML, and outerHTML. The innerHTML property is also supported by Gecko based browsers (Netscape 6+, Mozilla). The following table shows the effect of setting each of these properties:

PropertyEffect of Setting
innerTextThe textual content of the container is replaced. HTML tags, if any, are handled as regular text.

outerTextThe whole element (including the tag pair) is replaced with the given text. HTML tags, if any, are handled as regular text.

innerHTMLThe complete content of the container, not including the element tag pair itself, is replaced. HTML tags are parsed and affect the appearance.

outerHTMLThe complete container, including the element tag pair itself, is replaced. HTML tags are parsed and affect the appearance.

Let's take the following simple container:

<DIV ID="test">
   <B>This is a demo for inner/outer 
   text/html combinations</B>
</DIV>

It renders as:

This is a demo for inner/outer text/html combinations

Setting innerText as follows:

test.innerText = "This is the effect of setting innerText";

will yield the following output:

This is the effect of setting innerText

Setting outerText as follows:

test.outerText = "<B>This is the effect of setting outerText</B>";
will yield the following output:

<B>This is the effect of setting outerText</B>

Setting innerHTML as follows:

test.innerHTML = "<I>This is the effect of setting innerHTML</I>";

will yield the following output:

This is the effect of setting innerHTML

Setting outerHTML as follows:

test.outerHTML = "<SPAN><B><I>This is the " +
   "effect of setting outerHTML</I></B></SPAN>";

will yield the following output:

This is the effect of setting outerHTML