Skip to content
Related Articles
Open in App
Not now

Related Articles

JavaScript Change the text of a span element

Improve Article
Save Article
  • Last Updated : 13 Jan, 2023
Improve Article
Save Article

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.

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 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 changes the content by using textContent property

html




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

Output:

JavaScript Change the text of a span element

JavaScript Change the text of a span element

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

html




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

Output:

JavaScript Change the text of a span element

JavaScript Change the text of a span element


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!