jQuery Change Div, Span Content Example

jQuery Change Div, Span Content Example

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 change div,span,etc content dynamically

The html() method in jQuery is used to retrieve or set/change the HTML content of an element on a web page. This method allows you to access the inner HTML of the selected element, which includes all the nested elements, text, and markup contained within it.

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

ParameterDescription
ContentIt is an essential parameter. It is used to specify the new content for the selected elements. It can also contain HTML tags.
Function (index, currentcontent)It is an optional parameter. It specifies a function that returns the new content for the selected elements.Index: It shows the index position of the element in the set.Currentcontent: It shows the current HTML content of the selected element.

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *