JS - element properties - innerText

revision:


sets or returns the text content of a node and its descendants.

top

Syntax:

element.innerText or node.innerText: returns the text content of an element or node.

element.innerText = text or node.innerText = text: sets the text content of an element or node.

property value:

text : the text content of the element.

example

The text content of the button element is:

code:
                <div>
                    <button id="Btn" type="button">try it</button>
                    <p>The text content of the button element is: <span id="prop"></span></p>
                </div>
                <script>
                    let text = document.getElementById("Btn").innerText;
                    document.getElementById("prop").innerHTML = text;  
                </script>
            

This element has extra spacing and contains a span element.


            
        
            <div>
                <p id="prop1">   This element has extra spacing   and contains <span>a span element</span>.
                </p>
    
                <button onclick="getinnerHTML()">Get innerHTML</button>
                <button onclick="getinnerText()">Get innerText</button>
                <button onclick="gettextContent()">Get textContent</button>
                
                <pre id="prop2"></pre>
                
            </div>
            <script>
                function getinnerText() {
                    let text = document.getElementById("prop1").innerText;
                    document.getElementById("prop2").innerText = text;
                }
    
                function getinnerHTML() {
                    let text = document.getElementById("prop1").innerHTML;
                    document.getElementById("prop2").innerText = text;
                }
    
                function gettextContent() {
                    let text = document.getElementById("prop1").textContent;
                    document.getElementById("prop2").innerText = text;
                }
            </script>