JavaScript Get the text of a span element

Last Updated : 19 Sep, 2024

We are given an HTML document and the task is to get the text of an <span> element.

Below are the methods to get the text of a span element using JavaScript:

Table of Content

HTML DOM textContent Property
HTML DOM innerText Property

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

Example: 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

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: 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;">
        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.innerText;
        }        
    </script>
</body>
  
</html>

Output:

How To Get Element By Class Name In JavaScript ?

PranchalKatiyar

Improve

Article Tags :

JavaScript Get the text of a span element

HTML DOM textContent Property

Syntax:

HTML DOM innerText Property

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?