In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > outerText

outerText property

Browser support:

Sets or returns the text content of an element including the text content of its descendants.

There are other properties and methods in JavaScript that work similarly to the outerText property:

The innerText property is almost identical to the outerText property. They always return the same value for the same element, but when you set them, the innerText property replaces the content between the opening and closing tags of an element with the specified text, while the outerText property removes an element and inserts the specified text in place of it.
The innerHTML and outerHTML properties are similar to the innerText and outerText properties, but they set or return the HTML content of elements instead of the text content. The HTML content is the source code of an element, while the text content excludes the opening and closing tags from the source code.
To set or return the text of an option element, use the cross-browser text property.
To set or return the value of a text field (textarea or input:text), use the cross-browser value property.
If you need the path or the name of the file or files selected with an input:file element, use the cross-browser value property.
To set or return the text content of a CommentNode or TextNode, use the cross-browser data or nodeValue property.
Additionally, the insertAdjacentText method can also be used to insert text content into the document.

Syntax:

object.outerText;

You can find the related objects in the Supported by objects section below.

The outerText property is read-only for the html, tbody, td, tfoot, th, thead and tr elements in Internet Explorer. In Opera, Google Chrome, Safari and in other cases in Internet Explorer, the outerText property is read/write.

Possible values:

String that specifies or retrieves the text content.

Default: this property has no default value.

Example HTML code 1:

This example shows how to get the contents of an element:

<head>
    <script type="text/javascript">
        function GetContent () {
            var elem = document.getElementById ("myDiv");
            var message = "";
            if ('outerHTML' in elem) {
                message += "outer HTML : " + elem.outerHTML;
            }
            if ('outerText' in elem) {
                message += "\nouter text : " + elem.outerText;
            }

            message += "\ninner HTML : " + elem.innerHTML;

            if ('textContent' in elem) {
                message += "\ninner text : " + elem.textContent;
            }
            else {
                message += "\ninner text : " + elem.innerText;
            }
            
            alert (message);
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This is a division element that contains some <span style="color: red">red text</span>.
    </div>
    <br /><br />
    <button onclick="GetContent ();">Get the contents of the division element!</button>
</body>