Open In App

JavaScript Get the text of a span element

Improve
Improve
Like Article
Like
Save
Share
Report

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

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;">
        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:

JavaScript Get the text of a span element

JavaScript Get the text of a span element



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads