JavaScript Get the text of a span element

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 defined node, and all its descendants. By setting the innerText property, any child nodes are removed and are 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

<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>
    var span = document.getElementById("GFG_Span");
    var el_down = document.getElementById("GFG_DOWN");

    function gfg_Run() {
        el_down.innerHTML = span.textContent;
    }
</script>

Output:

JavaScript Get the text of a span element

Example 2: This example gets the content by using innerText property. 

html

<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>
    var span = document.getElementById("GFG_Span");
    var el_down = document.getElementById("GFG_DOWN");

    function gfg_Run() {
        el_down.innerHTML = span.innerText;
    }
</script>

Output:

JavaScript Get the text of a span element