HTML DOM innerText Property

Last Updated : 15 Jun, 2023

The DOM innerText Property is used to set or return the text content of a specified node and its descendants. This property is very similar to the 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 that represents the text content of the element along with its descendants.

Example 1: In this example, we will see DOM innerText Property

HTML

<!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() {
            let text =
                document.getElementById("geeks").innerText;
            document.getElementById("sudo").innerHTML = text;
        }
    </script>
</body>
 
</html>

Output:

Example 2: In this example, we will see DOM innerText Property

HTML

<!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>