JQuery | Get the text of a span element

Given an HTML document and the task is to get the text of a <span> tag using JQuery.

Method 1: Using jQuery text() Method: This method is used to set or return the text content of specified elements. If this method is used to return content, it returns the text content of all matched elements (HTML tags will be removed). If this method is used to set content, it overwrites the content of all matched elements.

Syntax:

  • Return text content:

    $(selector).text()
    
  • Set text content:

    $(selector).text(content)
    
  • Set text content using a function:

    $(selector).text(function(index, curContent))
    

Parameters:

  • content: It is required parameter. It specifies the new text content for the selected elements.
  • function(index, curContent): It is optional parameter. It specifies the function that returns the new text content for the selected elements.
    • index: It returns the index position of element in the set.
    • curContent: It returns current content of selected elements.

Example: This example gets the content by using JQuery’s text() method .

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            JQuery | Get the text of a span element
        </title>
          
        <script src
        </script>
    </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
            Click Here
        </button>
          
        <p id="GFG_DOWN" style="color:green;font-size:20px;font-weight:bold;">
        </p>
          
        <script>
            $('button').on('click', function() {
                var $val = $('#GFG_Span').text();
                $('#GFG_DOWN').text($val);
            });     
        </script
    </body
</html>                    

chevron_right


Output:

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

Method 2: Using jQuery html() Method: This method set or return the content (HTML) of the specified elements. If this method is used to return content, it returns the content of first matched element. If this method is used to set content, it overwrites the content of all matched elements.

Syntax:

  • Return content:

    $(selector).html()
    
  • Set content:

    $(selector).html(content)
    
  • Set content using a function:

    $(selector).html(function(index, curContent))
    

Parameters:

  • content: This parameter is required. It specifies the new text content for the selected elements containing the HTML tags.
  • function(index, curContent): This parameter is optional. It specifies a function that returns the new content for the selected elements.
    • index: It returns the index position of element in the set.
    • curContent: It returns current HTML content of selected elements.

Example: This example gets the content by using JQuery’s html() method .

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            JQuery | Get the text of a span element.
        </title>
        <script src
        </script>
    </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
            Click Here
        </button>
          
        <p id="GFG_DOWN" style="color:green; font-size:20px; font-weight:bold;">
        </p>
          
        <script>
            $('button').on('click', function() {
                var $val = $('#GFG_Span').html();
                $('#GFG_DOWN').text($val);
            });     
        </script
    </body
</html>                    

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.