August 12, 2000 - The Four Different inner/outer text/html Combinations | WebReference

August 12, 2000 - The Four Different inner/outer text/html Combinations

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

Yehuda Shiran, Ph.D.
Doc JavaScript

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: