HTMLElement: outerText property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The outerText property of the HTMLElement interface returns the same value as HTMLElement.innerText. 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).

See HTMLElement.innerText for more information and examples showing how both properties are used as getters.

Value

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 Node.textContent property.

When used as a setter it replaces the current node with the given text, converting any line breaks into <br> elements.

Examples

This example highlights the fundamental difference between outerText and 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:

html
<div>
  <p>Original content</p>
</div>

outerText replaces the whole selected element, so the JavaScript p.outerText = "Whole element replaced" replaces the whole selected p element:

html
<div>Whole element replaced</div>

By contrast, p.innerText = "Content inside element replaced" replaces the content inside the selected p element:

html
<div>
  <p>Content inside element replaced</p>
</div>

Specifications

Specification
HTML
# dom-outertext

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outerText

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also