JQuery On Click Change Div Content

JQuery On Click Change Div Content

Here is how to change content of div element on click of button click event using JQuery. You need to find div element and call html() function on it.

Example

<html>
<head>
   <title>Jquery Change content of Div</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
   <script type="text/javascript" language="javascript"> 
   
   $("document").ready(function(){
       
    $("#Button1").click(function(){
    
    $("#content").html("Dynamic content inside div");
    
    });
      
   });
   
   </script>
    
</head>
<body>
<div id="content">

This is text inside div 

</div>
<div>    
    <input id="Button1" type="button" value="button" />
</div>
</body>
</html>

Description:

On ready state of document we are finding button by it’s ID as button1 and attaching click event to it.
$(“#button1”).click( // function to execute goes here. .);

$(“#content”) gives div element whose id = “content”. html is JQuery function.

Tags:

Jquery