Open In App

How to use jQuery to Search and Replace HTML elements?

Last Updated : 15 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Output:

gif101
Output

J
joshi08
Improve
Article Tags :

Explore

Lightbox