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= 
"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:

My Personal Notes

Recommended Posts: