JQuery | Change the text of a span element

23 May, 2019
Given an HTML document and the task is to change the text content of a <span> element. There are various methods used to change the span elements which are discussed below:
jQuery text() Method: This method set/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:It returns the text content.$(selector).text()It sets the 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 the current content of selected elements.
Syntax:
It returns the text content.$(selector).text()
$(selector).text()
It sets the 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 the current content of selected elements.
jQuery html() Method: This method set/return the content (HTML) of the specified elements. If this method is used to return content, it returns the content of the 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: It is required parameter. It specifies the new text content for the selected elements containing the HTML tags.function(index, curContent): It is optional parameter. It specifies the function that returns the new content for the selected elements.index: It returns the index position of element in the set.curContent: It returns the current HTML content of selected 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: It is required parameter. It specifies the new text content for the selected elements containing the HTML tags.
function(index, curContent): It is optional parameter. It specifies the function that returns the new content for the selected elements.
index: It returns the index position of element in the set.
curContent: It returns the current HTML content of selected elements.
Example 1: This example changes the content by using JQuery’s text() method .
<!DOCTYPE HTML> <html>     <head>         <title>             JQuery | Change 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>             Change        </button>                  <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            $('button').on('click', function() {                $('#GFG_Span').text("New Span text content");                $('#GFG_DOWN').text("Span content changed");            });             </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example changes the content by using JQuery’s html() method .
<!DOCTYPE HTML> <html>     <head>         <title>             JQuery | Change 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>             Change        </button>                  <p id = "GFG_DOWN" style =             "color:green; font-size: 20px; font-weight: bold;">        </p>                  <script>            $('button').on('click', function() {                $('#GFG_Span').html("<p>New Span text content</p>");                $('#GFG_DOWN').text("Span content changed");            });             </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
jQuery-Misc
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.