How to use jQuery to Search and Replace HTML elements?

Last Updated : 15 Jul, 2025

Using jQuery, you can dynamically search and replace HTML elements on a webpage. By selecting elements and binding actions to events, you can manipulate their content or structure in response to user interactions or other triggers

Approach

Integrate the jQuery library hosted on a content delivery network (CDN), ensuring access to jQuery functionalities.
Two buttons with classes "one" and "two" are defined, each bound to a click event handler using jQuery.
When the "Correct Me!" button is clicked, jQuery targets the <h1> element and replaces its text content with "Geeks for Geeks!".
Upon clicking the "Add Me!" button, jQuery targets a <span> element and replaces its HTML content with an <h3> element containing the text "You can also Contribute.".
Basic CSS styles are applied to <h1> elements to change their color to green and align the body content to the center.

Example: The below example shows the above-explained approach.

HTML

<!DOCTYPE html> <html> <head> <title>jQuery!!!</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">  </script> <style type="text/css">  h1 {  color: green;  }  body {  text-align: center;  }  </style> </head> <body> <h1>Geeks Geeks</h1> <br> <button class="one">Correct Me!</button> <br> <br> <button class="two">Add Me!</button> <br> <span></span> <script type="text/javascript">  $(".one").click(function () {  $("h1").text("Geeks for Geeks!");  });  $(".two").click(function () {  $("span").html("<h3>You can also Contribute.</h3>");  });  </script> </body> </html>