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

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

textContent property

Browser support:

9

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

The textContent property is supported in Internet Explorer from version 9. In older Internet Explorer versions, use the innerText property for similar functionality.

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

The outerText property is almost identical to the innerText 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.textContent;

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

This property is read/write.

Possible values:

String that sets or retrieves the contents of the element.

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>