spacer
Yehuda Shiran August 12, 2000
The Four Different inner/outer text/html Combinations
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

You can change HTML containment elements (such as DIV and SPAN) on the fly by using one of the following four properties: innerText, outerText, innerHTML, and outerHTML. The following table summarizes the differences between these four properties:

PropertyContent
innerTextThe textual content of the container.

outerTextSame as innerText when accessed for read; replaces the whole element when assigned a new value.

innerHTMLThe complete content of the container, not including the element tag pair itself.

outerHTMLThe complete container, including the element tag pair itself.

The following script demonstrates these properties:

<DIV ID="test"><B>This is a demo for inner/outer text/html combinations</B></DIV>
<SCRIPT LANGUAGE="JavaScript">
alert("InnerText is: " + test.innerText);
alert("OuterText is: " + test.outerText);
alert("InnerHTML is: " + test.innerHTML);
alert("OuterHTML is: " + test.outerHTML);
</SCRIPT>

The first alert box demonstrates the innerText property:

The second alert box demonstrates the outerText property:

The third alert box demonstrates the innerHTML property:

The fourth alert box demonstrates the outerHTML property:


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business