Jquery как изменить содержимое span

Improve Article

Save Article

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.
• 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.

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

Output:

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

Output:

Improve Article

Save Article

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.
• 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.

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

Output:

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

Output:

jQuery change content of div span; In this tutorial, you will learn how to change or replace div, span , button, paragraph text, or content in html using jQuery html() method.

jQuery Html Method

The jQuery html () method is used to change the entire contents of the selected elements. This selected element replaces content with new content.

Syntax jQuery Html Method

$(selector).html()  

html() method returns the content of first matched element.

$(selector).html(content)  

Html() method sets the content of matched element.

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

It sets the content using function.

The HTML () method is used either to set content or to return the contents of the selected elements.

• To set the content :- When you use this method to set the content, it overwrites the contents of all matched elements.
• To return the content :- When you use this method to return content, it first returns the content of the matched element.

Parameters of jQuery Html Method

Ex 1 :- jQuery html() method

Let’s see an example 1 of html() method.

<!DOCTYPE html>  
<html>  
<title>Learn Jquery Html Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_click").click(function(){  
        $("#para").html("Hello <b>there, Thanks to try it</b>");  
    });  
});  
</script>  
</head>  
<body>  
<button id="btn_click">Click here to change the content</button>  
<p id="para">This is a paragraph. When you click the button after that it will change.</p>  
</body>  
</html>  

Ex 2 :- jQuery html()

Let’s see example2 of html method. This example returns the first match of element.

<!DOCTYPE html> 
<html> 
<head> 
<title> jQuery html() Method </title> 		
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
</head> 
	
<body style = "text-align:center;"> 
			
  <h1 style = "color:blue;" >Hello World </h1> 
  <h2>jQuery | html() Method </h2> 
	
  <button id="btn-click">Click</button> 
	<script> 
		$(document).ready(function(){ 
			$("#btn-click").click(function(){ 
				alert($("h2").html()); 
			}); 
		}); 
	</script> 
</body> 
</html> 

Ex 3 :- jQuery replace text

Let’s take a new example using the jQuery html() method. It will replace the h2 tag text. See the example below

<!DOCTYPE html> 
<html> 
<head> 
<title> jQuery replace text using html() </title>        
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
</head> 
    
<body style = "text-align:center;"> 
            
  <h1 style = "color:blue;" >Hello World </h1> 
  <h2>jQuery | html() Method </h2> 
    
  <button id="btn-click">Click</button> 
    <script> 
        $(document).ready(function(){ 
            $("#btn-click").click(function(){ 
                $("h2").html('Hello'); 
            }); 
        }); 
    </script> 
</body> 
</html> 

Recommended jQuery Tutorial

1. jQuery Text Method By Example
2. Get and Set Input, Select box, Text, radio Value jQuery
3. Duplicate Html Elements Using jQuery By Example
4. jQuery | Event MouseUp By Example
5. Event jQuery Mouseleave By Example
6. jQuery Event Mouseenter Example
7. Event jQuery MouseOver & MouseOut By Example
8. keyup jquery event example
9. Jquery Click Event Method with E.g.
10. Event jQuery. Blur By Example
11. jQuery form submit event with example
12. keydown function jQuery
13. List of jQuery Events Handling Methods with examples
14. Jquery Selector by .class | name | #id | Elements
15. How to Get the Current Page URL in jQuery
16. jQuery Ajax Get() Method Example
17. get radio button checked value jquery by id, name, class
18. jQuery Set & Get innerWidth & innerHeight Of Html Elements
19. jQuery Get Data Text, Id, Attribute Value By Example
20. Set data attribute value jquery
21. select multiple class in jquery
22. How to Remove Attribute Of Html Elements In jQuery
23. How to Checked Unchecked Checkbox Using jQuery
24. jQuery removeClass & addClass On Button Click By E.g.
25. To Remove whitespace From String using jQuery
26. jQuery Ajax Post Method Example
27. jQuery Ajax Get Method Example
28. To Load/Render html Page in div Using jQuery Ajax $.load
29. jQuery Sibling Methods – To Find Siblings Elements
30. jQuery Find Siblings Elements with Class, id