HTML | DOM innerText Property

Last Updated : 25 Jul, 2019

The DOM innerText Property is used to set or returns the text content of a specified node and its descendants. This property is very similar to text content property but returns the content of all elements, except for <script> and <style> elements.

Syntax: It is used to set the innerText property.

node.innerText = text

Return Value: It returns a string value which represent the text content of the element along with its descendants.
Example-1:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM innerText Property
    </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM textContent Property</h2>
  
    <button id="geeks" onclick="MyGeeks()">
        Submit
    </button>
  
    <p id="sudo"></p>
    <script>
        function MyGeeks() {
            var text =
                document.getElementById("geeks").innerText;
            document.getElementById("sudo").innerHTML = text;
        }
    </script>
</body>
  
</html>         

Output :
Before clicking on the Button:

After clicking on the Button:

Example-2:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM innerText Property
    </title>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>HTML DOM innerText Property</h2>
        <p id="geeks" style="font-size:20px;">Hello Geeks!</p>
        <button onclick="MyGeeks()">
            Submit
        </button>
        <!-- MyGeeks function replace the inner text-->
        <script>
            function MyGeeks() {
                document.getElementById("geeks").innerText =
                                  "Welcome to GeeksforGeeks!";
            }
        </script>
    </center>
</body>
  
</html>      

Output :
Before clicking on The Button:

After clicking on the Button:

Supported Browsers: The browser supported by DOM innerText property are listed below:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.0

My Personal Notes

Related Articles