jQuery Api html() Learn Basic of jQuery html method

jQuery html () Method – how to use this method with selected html elements. Here you will learn how use 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

$(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 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.

Example of 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>  

Example 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> 

Spread the love

Be First to Comment

Leave a Reply

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