Open In App

JavaScript Change the Text of a Span Element

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we have given an HTML document, and the task is to change the text of the span element.

There are two properties used to change the content, these are:

HTML DOM textContent Property:

This property sets/returns 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 changes the content by using the textContent property. 

html




<!DOCTYPE html>
<html lang="en">
   
<head>
    <title>
        JavaScript Change the text of a span element
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <span id="GFG_Span">
        This is text of Span element.
    </span>
 
    <br><br>
 
    <button onclick="gfg_Run()">
        Change
    </button>
 
    <p id="GFG_DOWN"></p>
 
    <script>
        let span = document.getElementById("GFG_Span");
        let el_down = document.getElementById("GFG_DOWN");
 
        function gfg_Run() {
            span.textContent = "New Span content";
            el_down.innerHTML = "Span content changed";
        }       
    </script>
</body>
   
</html>


Output:

JavaScript Change the text of a span element

JavaScript Change 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 changes the content by using the innerText property. 

html




<!DOCTYPE html>
<html lang="en">
   
<head>
    <title>
       JavaScript Change the
      text of a span element
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <span id="GFG_Span">
        This is text of Span element.
    </span>
 
    <br><br>
 
    <button onclick="gfg_Run()">
        Change
    </button>
 
    <p id="GFG_DOWN"></p>
 
    <script>
        let span = document.getElementById("GFG_Span");
        let el_down = document.getElementById("GFG_DOWN");
 
        function gfg_Run() {
            span.innerText = "New Span content";
            el_down.innerHTML = "Span content changed";
        }       
    </script>
</body>
   
</html>


Output:

JavaScript Change the text of a span element

JavaScript Change the text of a span element



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