jQuery .html



If you want to add or change the content of you page, you can use .html(string) function. It will set the contents of EACH element in the set of MATCHED elements.

As a practical example consider that we have a form in which a user is entering some input. As soon as he clicks in the input area, a more user friendly message may appear to tell him what exactly he needs to enter. Let us learn with a simple example.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").click(function(){
   $("span").html("Please Enter first as well as last name");
  });
});
</script>
</head>
<body>

<input type="text">
<br />
<span>Enter Your name</span>
</body>
</html>



Notice that the .html(string) will apply to EACH span element in the above example. So if there are more than one span elements, it will apply to all of them
You may like to try this example here.

If you wished to apply the .html content change only to a one particular element, you can combine it with their id. For example consider this example


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").click(function(){
   $("span#id1").html("Please Enter first as well as last name");
  });
});
</script>
</head>
<body>

<input type="text">
<br />
<span id ="id1">Enter Your name</span> <br />
<span id ="id2">Do not enter Middle Name</span>
</body>
</html>



You may like to try this example here.