Main Tutorials

jQuery html() example

jQuery html() is used to get the html contents of the first element of the matched elements; While html(‘new html content’) is used to replace or set the html contents of all the matched elements.

For example, two div elements that contains same class name “AClass”.


<div class="AClass">ABC 1</div>
<div class="AClass">ABC 2</div>

1. $(‘.AClass’).html()

This will get the “ABC 1” only, the second matched element “ABC 2” will be ignore.

2. $(‘.AClass’).html(‘This is new text‘)

This will replace the html content of all the matched elements.


<div class="AClass"><b>This is new text</b></div>
<div class="AClass"><b>This is new text</b></div>

jQuery html() example


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.htmlClass{
		padding:8px;
		border:1px solid blue;
		margin-bottom:8px;
	}
</style>

</head>
<body>
  <h1>jQuery html() example</h1>

  <div class="htmlClass">I'm going to replate by something ....</div>
  
  <div class="htmlClass">I'm going to replate by something 2....</div>
  
  <p>
  <button id="getHtml">html()</button>
  <button id="setHtml">html('xxx')</button>
  <button id="reset">reset</button>
  </p>

  <script type="text/javascript">
	
    $("#getHtml").click(function () {
		
	  alert($('.htmlClass').html());
	  
    });
	
    $("#setHtml").click(function () {
		
	  $('.htmlClass').html('<b>This is a new text</b>');
	  
    });
	
    $("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments