javascript

The outerText Property
Chapter 10: The Document Object Model
The outerText property works in the same way as innerText except that it includes the node on
which it ’ s called. For reading text values, outerText and innerText essentially behave in the exact
same way. In writing mode, however, outerText behaves very differently. Instead of replacing just the
child nodes of the element on which it ’ s used, outerText actually replaces the entire element, including
its child nodes. Consider the following:
div.outerText = “Hello world!”;
This single line of code is equivalent to the following two lines:
var text = document.createTextNode(“Hello world!”);
div.parentNode.replaceChild(text, div);
Essentially, the new text node completely replaces the element on which outerText was set. After that
point in time, the element is no longer in the document and cannot be accessed.
The outerText property is supported by IE, Safari, Opera, and Chrome. This property is typically not
used since it modifies the element on which it is accessed. It is recommended to avoid it whenever
possible.
The outer HTML Property
The outerHTML property is to innerHTML what outerText is to innerText . When outerHTML is called
in read mode, it returns the HTML of the element on which it is called, as well as its child nodes. When
called in write mode, outerHTML replaces the node on which it is called with the DOM subtree created
from parsing the given HTML string. Consider the following HTML code:
< 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 >
When outerHTML is called on the < div > in this example, the same code is returned, including the code
for the < div > . Note that there may be differences based on how the browser parses and interprets the
HTML code (these are the same differences you ’ ll notice when using innerHTML ).
Use outerHTML to set a value in the following manner:
div.outerHTML = “ < p > This is a paragraph. < /p > ”;
This code performs the same operation as the following DOM code:
var p = document.createElement(“p”);
p.appendChild(document.createTextNode(“This is a paragraph.”));
div.parentNode.replaceChild(p, div);
305