JQuery | Get the text of a span element - GeeksforGeeks

03 Aug, 2021
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()

$(selector).text()

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

$(selector).text(content)

Set text content using a function:$(selector).text(function(index, curContent))

$(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.
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 .
<!DOCTYPE HTML> <html>     <head>         <title>             JQuery | Get the text of a span element        </title>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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>                    
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()

$(selector).html()

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

$(selector).html(content)

Set content using a function:$(selector).html(function(index, curContent))

$(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.
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 .
<!DOCTYPE HTML> <html>     <head>         <title>             JQuery | Get the text of a span element.        </title>        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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>                    
Output:
Before clicking on the button:
After clicking on the button:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
jQuery-Misc
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?