WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Replace innerHTML of a Div using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery html() Method

You can simply use the jQuery html() method to replace innerHTML of a div or any other element.

The jQuery code in the following example will replace the innerHTML of a DIV element having id pageTitle with an HTML heading on click of the button. Let's try it out:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>jQuery Replace innerHTML of a Div</title>
  • <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  • <script>
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         $("#pageTitle").html("<h1>Hello, World!</h1>");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <div id="pageTitle">
  •         <p><b>Click the following button to replace me.</b><p>
  •     </div>
  •     <button type="button">Replace HTML</button>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.