javascript

Chapter 10: The Document Object Model
< div id=”content” >
< p > This is a < strong > paragraph < /strong > with a list following it. < /p >
< ul >
< li > Item 1 < /li >
< li > Item 2 < /li >
< li > Item 3 < /li >
< /ul >
< /div >
For the < div > element in this example, the innerText property returns the following string:
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
Note that different browsers treat white space in different ways, so the formatting may or may not
include the indentation in the original HTML code.
Using the innerText property to set the contents of the < div > element is as simple as this single line
of code:
div.innerText = “Hello world!”;
After executing this line of code, the HTML of the page is effectively changed to the following:
< div id=”content” > Hello world! < /div >
Setting innerText removes all of the child nodes that existed before, completely changing the DOM
subtree. Additionally, setting innerText encodes all HTML syntax characters (less - than, greater - than,
quotation marks, and ampersands) that may appear in the text. Here is an example:
div.innerText = “Hello & welcome, < b > \”reader\”! < /b > ”;
The result of this operation is as follows:
< div id=”content” > Hello & amp; welcome, & lt;b & gt; & quot;reader & quot;! & lt;/b & gt; < /div >
Setting innerText can never result in anything other than a single text node as the child of the
container, so the HTML - encoding of the text must take place in order to keep to that single text node.
The innerText property is also useful for stripping out HTML tags. By setting the innerText equal
to the innerText , as shown here, all HTML tags are removed:
div.innerText = div.innerText;
Executing this code replaces the contents of the container with just the text that exists already.
The innerText property is supported in IE, Safari, Opera, and Chrome. Firefox does not support
innerText, but it supports an equivalent property called textContent . The textContent property is
301