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