HTMLElement: outerText property
outerText property of the
HTMLElement interface returns the same value as
When used as a setter it replaces the whole current node with the given text (this differs from
innerText, which replaces the content inside the current node).
HTMLElement.innerText for more information and examples showing how both properties are used as getters.
A string representing the rendered text content of an element and its descendants.
If the element itself is not being rendered (for example, is detached from the document or is hidden from view), the returned value is the same as the
When used as a setter it replaces the current node with the given text, converting any line breaks into
This example highlights the fundamental difference between
innerText when used as setters (they are the same when used by getters).
Note: The example is a modified version of What is the difference between innerText and outerText? (Stack overflow) by codingintrigue, is licensed under CC BY-SA 3.0.
Consider a page that contains the following HTML:
<div> <p>Original content</p> </div>
p.outerText = "Whole element replaced" replaces the whole selected
<div>Whole element replaced</div>
p.innerText = "Content inside element replaced" replaces the content inside the selected
<div> <p>Content inside element replaced</p> </div>
|HTML Standard |
BCD tables only load in the browser