Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to replace innerHTML of a div using jQuery?

  • Last Updated : 23 Apr, 2019

For replacing innerHTML of a div with jquery, html() function is used.




<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link href=
        body {
            margin-top: 5%;
        div {
            text-align: center;
    <script src=
    <div class="div_1">
        <h1 style="color: green">
          This is the content inside the div before changing
    <div class="div_2">
        <button class="btn btn-primary"
          Click here for changing innerHTML
    $(document).ready(function() {
        $('.btn').click(function() {
              "<h1><span style='color: green;'>GeeksforGeeks"+
              "</span><br>This is the content inside the div"+
              " after changing innerHTML</h1>");

After loading the web page, on clicking the button content inside the div will be replaced by the content given inside the html() function.

Before clicking button:

After clicking button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!