How to use jQuery to Search and Replace HTML elements? Last Updated : 15 Jul, 2025 Summarize Comments Improve Suggest changes Share 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 ApproachIntegrate 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: Output Comment More infoAdvertise with us Next Article How to replace HTML element in jQuery ? J joshi08 Follow Improve Article Tags : Web Technologies JQuery HTML-Misc jQuery-Selectors jQuery-Questions +1 More Similar Reads How to replace HTML element in jQuery ? Replacing an HTML element in jQuery involves selecting an existing element on a webpage and replacing it with new content or another element. This process can be easily managed with jQuery methods like .replaceWith() or .html(), enabling dynamic and flexible content updates.Syntax replaceWith( newCo 2 min read How to get the outer html of an element using jQuery ? Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to 2 min read How to change an HTML element name using jQuery ? Given an HTML document and the task is to replace an HTML element by another element. For example: we can change an element <b> with <h1> element without changing any other property.Approach: Select the HTML element which need to be change.Copy all attributes of previous element in an ob 2 min read How to attach a method to HTML element event using jQuery ? In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will 2 min read How to find all paragraph elements using jQuery ? Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el 2 min read 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: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> changing-innerhtml-using-jquery </title> <link href= 1 min read Like