JavaScript Change the Text of a Span Element

Last Updated : 17 Sep, 2024

Updating the text of HTML elements, such as a in JavaScript allows developers to dynamically alter webpage content. This technique is used for creating interactive web features like displaying user feedback, updating real-time data, or modifying elements based on user actions. Here, we'll explore how to change the text of a element using two primary properties.

Selecting the Span Element

To modify the text of a , you first need to select it using JavaScript. Common methods for selecting elements include:

getElementById: Selects an element by its unique ID.
querySelector: Selects the first matching element using a CSS selector.

Properties to Change Text Content

1. textContent Property: This property sets or returns the plain text content of an element and all its child nodes, ignoring HTML tags and styling. It replaces the entire content with the specified text.

Syntax:

// Retrieve text content
let text = element.textContent;

// Set text content
element.textContent = 'New Text';

2. innerText Property: This property sets or returns the visible text content of an element, respecting styling, visibility, and line breaks. It updates the text as it appears to the user.

Syntax:

// Retrieve visible text
let text = element.innerText;

// Set visible text
element.innerText = 'New Text';

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

Table of Content

Using HTML DOM textContent Property
Using HTML DOM innerText Property

Examples to Change Text of a Span Element

Example 1: Using textContent to Change Span Text

In this example, we'll change the content of a using the textContent property. Clicking the button will update the text to "New Span content" and change the content to "Span content changed".

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

Example 2: Using innerText to Change Span Text

Here, we'll use the innerText property to update the text of a . Clicking the button will change the text to "New Span content" and update the content.

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>