Property	Effect of Setting
innerText	The textual content of the container is replaced. HTML tags, if any, are handled as regular text.
outerText	The whole element (including the tag pair) is replaced with the given text. HTML tags, if any, are handled as regular text.
innerHTML	The complete content of the container, not including the element tag pair itself, is replaced. HTML tags are parsed and affect the appearance.
outerHTML	The 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>";

<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

People who read this tip also read these tips:

• A Scrolling Algorithm
• Creating Web Service Proxy Namespace
• Naming XML Tree Nodes
• Displaying the IsPrime Web Service's Results
• The Clipping Region