In this article, we are given an HTML document and the task is to get the text of an <span> element. There are two methods used to get the span elements which are discussed below:
HTML DOM textContent Property: This property set/return the text content of the defined node and all its descendants. By setting the textContent property, the child nodes are removed and replaced by a single Text node having the specified string.Â
Syntax:
- Return the text content of a node.
node.textContent
- Set the text content of a node.
node.textContent = text
HTML DOM innerText Property: This property set/return the text content of the defined node and all its descendants. By setting the innerText property, any child nodes are removed and replaced by a single Text node having the specified string.Â
Syntax:
- Return the text content of a node.
node.innerText
- Set the text content of a node.
node.innerText = text
Example 1: This example gets the content by using textContent property.Â
html
<!DOCTYPE html><html lang="en">Â
<head>    <title>        JavaScript Get the text of a span element    </title></head>Â
<body>    <h1 style="color:green;">        GeeksForGeeks    </h1>Â
    <span id="GFG_Span" style="font-size: 15px;                                font-weight: bold;">        This is text of Span element.    </span>Â
    <br><br>Â
    <button onclick="gfg_Run()">        Click here    </button>Â
    <p id="GFG_DOWN" style="color:green;                             font-size: 20px;                             font-weight: bold;">    </p>Â
    <script>        let span = document.getElementById("GFG_Span");        let el_down = document.getElementById("GFG_DOWN");Â
        function gfg_Run() {            el_down.innerHTML = span.textContent;        }           </script></body></html> |
Output:
JavaScript Get the text of a span element
Example 2: This example gets the content by using innerText property.Â
html
<!DOCTYPE html><html lang="en"><head>    <title>        JavaScript Get the text of a span element    </title></head>Â
<body>    <h1 style="color:green;">        neveropen    </h1>Â
    <span id="GFG_Span" style="font-size: 15px;                                font-weight: bold;">        This is text of Span element.    </span>Â
    <br><br>Â
    <button onclick="gfg_Run()">        Click here    </button>Â
    <p id="GFG_DOWN" style="color:green;                             font-size: 20px;                             font-weight: bold;">    </p>Â
    <script>        let span = document.getElementById("GFG_Span");        let el_down = document.getElementById("GFG_DOWN");Â
        function gfg_Run() {            el_down.innerHTML = span.innerText;        }           </script></body></html> |
Output:
JavaScript Get the text of a span element
