JavaScript | Change the text of a span element

Last Updated : 23 May, 2019

Given an HTML document and the task is to change the text of span element. There are two property used to change the content.

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 the removed and are replaced by a single text node having the specified string.
Syntax:
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
- Return the text content of a node:
```
node.textContent
```
- Set the text content of a node:
```
node.textContent = text
```
Property values: It contains single value text which specifies the text content of the specified node.
Return value: It returns a string, representing the text of node and all its descendants. It returns null if the element is a document, a document type, or a notation.
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
```
Property values: It contains single value text which specifies the text content of the specified node.
Return value: It returns a string, representing the “rendered” text content of a node and all its descendants.

Example 1: This example changes the content by using textContent property .

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            JavaScript | Change the text of a span element
        </title>
    </head> 
      
    <body style = "text-align:center;" id = "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()"> 
            Change
        </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() {
                span.textContent = "New Span content";
                el_down.innerHTML = "Span content changed";
            }         
        </script> 
    </body> 
</html>                    

Output:

Before clicking on the button:
After clicking on the button:

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

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            JavaScript | Change the text of a span element
        </title>
    </head> 
      
    <body style = "text-align:center;" id = "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()"> 
            Change
        </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() {
                span.innerText = "New Span content";
                el_down.innerHTML = "Span content changed";
            }         
        </script> 
    </body> 
</html>                    

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles

Table of Contents

JavaScript | Change the text of a span element