How to replace innerHTML of a div using jQuery?
For replacing innerHTML of a div with jquery, html() function is used.
Syntax:
$(selector).html()
Example:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title> changing-innerhtml-using-jquery </title> <link href= rel="stylesheet"> <style> body { margin-top: 5%; } div { text-align: center; } </style> <script src= type="text/javascript"> </script></head> <body> <div class="div_1"> <h1>Geeksforgeeks</h1> <h1 style="color: green"> This is the content inside the div before changing </h1> </div> <div class="div_2"> <button class="btn btn-primary" type="submit"> Click here for changing innerHTML </button> </div> </body><script> $(document).ready(function() { $('.btn').click(function() { $("div.div_1").html( "<h1><span style='color: green;'>GeeksforGeeks"+ "</span><br>This is the content inside the div"+ " after changing innerHTML</h1>"); }) })</script> </html> |
After loading the web page, on clicking the button content inside the div will be replaced by the content given inside the html() function.
Output:
Before clicking button:
After clicking button:
.png)
