How to replace innerHTML of a div using jQuery? Last Updated : 23 Apr, 2019 Improve Improve Like Article Like Save Share Report 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= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <style> body { margin-top: 5%; } div { text-align: center; } </style> <script src= "https://code.jquery.com/jquery-3.4.0.min.js" 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: Like Article Suggest improvement Previous How to call functions after previous function is completed in jQuery ? Next HTML <meter> min Attribute Share your thoughts in the comments Add Your Comment Please Login to comment...