Skip to content
Related Articles

Related Articles

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.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :