jQuery html() method

The jQuery html() method get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

.html()

Description : Get the HTML contents of the first element in the set of matched elements.

Source Code

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   <style>
 	 .highlight { border : 2px solid #1E8CBE; }
  </style>
</head>
<body>
  
<div class="div1">Hello World!!!</div>
<div class="div2">Div 2</div>

<button id="button1">Get HTML Value</button>
  
<script>
jQuery("#button1").click(function () {
	var val = jQuery(".div1").html();
	jQuery(".div2").html(val);
	jQuery(".div2").addClass("highlight");
});

</script>
</body>
</html>

Demo

Following example get the HTML content of the div (having div1 class).

Hello World!!!
Div 2

.html( htmlString )

Description : Set the HTML contents of each element in the set of matched elements.

Source Code

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   <style>
 	 .highlight { border : 2px solid #1E8CBE; }
  </style>
</head>
<body>
  
<div class="div1">Hello World!!!</div>
<div class="div2">Div 2</div>

<button id="button2">Set HTML Value</button>
  
<script>
jQuery("#button2").click(function () {
	jQuery(".div1").html('Hello World 2!!!');
	var val = jQuery(".div1").html();
});
</script>
</body>
</html>

Demo

Following example sets the HTML content of the div (having div1 class).

Hello World!!!
Div 2

,

No comments yet.

Leave a Reply