Article Categories

Selected Reading

JavaScript - Get the text of a span element

Javascript Web Development Object Oriented Programming

In JavaScript, you can get the text content of a span element using several methods. The most common approaches are innerHTML, textContent, and innerText.

Methods to Get Span Text

There are three main properties to retrieve text from a span element:

innerHTML - Gets HTML content including tags
textContent - Gets plain text content (recommended)
innerText - Gets visible text content

Example: Getting Span Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Span Text</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .result {
            font-size: 18px;
            font-weight: 500;
            margin: 10px 0;
            color: #333;
        }
        .test-span {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 5px;
            display: inline-block;
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>
    
    
    <span class="test-span">This is <strong>sample text</strong> inside a span element
    
    
        <button onclick="getInnerHTML()">Get innerHTML</button>
        <button onclick="getTextContent()">Get textContent</button>
        <button onclick="getInnerText()">Get innerText</button>
    
    
    

    <script>
        const spanElement = document.querySelector('.test-span');
        const outputDiv = document.getElementById('output');

        function getInnerHTML() {
            outputDiv.innerHTML = 'innerHTML: ' + spanElement.innerHTML;
        }

        function getTextContent() {
            outputDiv.innerHTML = 'textContent: ' + spanElement.textContent;
        }

        function getInnerText() {
            outputDiv.innerHTML = 'innerText: ' + spanElement.innerText;
        }
    </script>
</body>
</html>

Output

When you click each button, you'll see different outputs:

innerHTML: This is <strong>sample text</strong> inside a span element
textContent: This is sample text inside a span element
innerText: This is sample text inside a span element

Comparison of Methods

Property	Returns HTML Tags	Respects CSS Styling	Best For
`innerHTML`	Yes	No	Getting HTML content
`textContent`	No	No	Getting all text (recommended)
`innerText`	No	Yes	Getting visible text only

Simple Example with Different Selectors

<!DOCTYPE html>
<html>
<head>
    <title>Span Text Examples</title>
</head>
<body>
    <span id="mySpan">Hello World!
    <span class="message">Welcome to JavaScript

    <script>
        // Method 1: Select by ID
        const spanById = document.getElementById('mySpan');
        console.log('By ID:', spanById.textContent);

        // Method 2: Select by class
        const spanByClass = document.querySelector('.message');
        console.log('By class:', spanByClass.textContent);

        // Method 3: Select by tag name (first span)
        const firstSpan = document.querySelector('span');
        console.log('First span:', firstSpan.textContent);
    </script>
</body>
</html>

Key Points

Use textContent when you want plain text without HTML tags
Use innerHTML when you need to preserve HTML formatting
Use innerText when you need only visible text (respects CSS display properties)
Always select the element first using methods like getElementById() or querySelector()

Conclusion

Getting span text in JavaScript is straightforward using textContent, innerHTML, or innerText. Choose textContent for plain text extraction and innerHTML when you need HTML content preserved.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next