jQuery html Examples

Do you want to find out more about what the jQuery html is used for and how you can use it in your own web pages? .html() is a method in jQuery. So in this article, I am going to share very easy ways on how to use the html method by means of easy examples. So follow along for more info.

Time to look at easy jQuery html Examples

In order to find out how to use .html() method in jQuery, let’s first understand what the .html() method does. Basically the .html() method works differently based upon what you are trying to do. That said, here are the two possibilities.

1. Get content of the desired element – The html() method will basically get the html contents of the first element of the matched elements.

2. Write to the content of the desired element – The html() method will basically write to the html contents of all matched elements.

Enough talking, now let’s look at some real examples.

Common HTML source for all examples for all the following examples:

<style type="text/css">
#my_div1 {
	background-color: #E1F3FF;
	border: 1px solid #09F;
	padding: 10px;
	margin-bottom: 10px;
}
#my_span1 {
	background-color: #D7FFD7;
	border: 1px solid #090;
	padding: 10px;
	margin-bottom: 10px;	
}
.common_class {
	color:#F60;
	font-size: 30px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
</style>

<div class="divs_container">

<div id="my_div1" class="common_class">This is MY DIV 1</div>

<span id="my_span1" class="common_class">This is MY SPAN 1</span>

</div>

<p>	
<input type="submit" name="sbt_get_div_content" id="sbt_get_div_content" value="Get DIV HTML using DIV ID">
<input type="submit" name="sbt_get_span_content" id="sbt_get_span_content" value="Get SPAN HTML using SPAN ID"> 
<input type="submit" name="sbt_get_content_using_class" id="sbt_get_content_using_class" value="Get HTML Content using Class">
</p>

<p>
<input type="submit" name="sbt_replace_div_content" id="sbt_replace_div_content" value="Replace DIV HTML using DIV ID">
<input type="submit" name="sbt_replace_span_content" id="sbt_replace_span_content" value="Replace SPAN HTML using SPAN ID"> 
<input type="submit" name="sbt_replace_content_using_class" id="sbt_replace_content_using_class" value="Replace HTML Content using Class">

</p>

<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">

 Here is the common jQuery code for all examples:

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

	//Put all the example codes here when you try it our yourself	

});	

</script>

Example 1: Get the html content of the div using div ID

	//Gets the html content of the div
	$('#sbt_get_div_content').on("click", function(e){		

		alert( $("#my_div1").html() );

		e.preventDefault();

	});

Example 2: Get the html content of the span using span ID

	//Gets the html content of the span
	$('#sbt_get_span_content').on("click", function(e){		

		alert( $("#my_span1").html() );

		e.preventDefault();

	});

Example 3: Get the html content using the common class

	//Gets the html content using the class name
	$('#sbt_get_content_using_class').on("click", function(e){		

		alert( $(".common_class").html() );

		e.preventDefault();

	});

Example 4: Write to the html content of the div using div ID

	//Overwrite the html content of the div
	$('#sbt_replace_div_content').on("click", function(e){		

		$("#my_div1").html('New DIV data');

		e.preventDefault();

	});

Example 5: Write to the html content of the span using span ID

	//Overwrite the html content of the span	
	$('#sbt_replace_span_content').on("click", function(e){		

		$("#my_span1").html('New SPAN data');

		e.preventDefault();

	});

Example 6: Write to the html content of all matched elements using class name

	//Overwrite the html content using class name
	$('#sbt_replace_content_using_class').on("click", function(e){		

		$(".common_class").html('Totally new data always appears in all matched elements when using a common attribute such as the class name.');

		e.preventDefault();

	});

That’it! Your Turn Now!

Do you know of any other examples of jQuery html method? Feel free to suggest by commenting below.