How to replace HTML element in jQuery ? Last Updated : 24 Sep, 2024 Comments Improve Suggest changes Like Article Like Report 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( newContent ).replaceWith( function )Return Value: This method returns the selected element with the change.Note: The jQuery .replaceWith() method, returns the jQuery object so that the other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.Example 1: In this example we use jQuery to replace a paragraph with a styled <div> when the button is clicked. The replacement happens dynamically using the replaceWith() method, altering the content. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("button").click(function () { $("p").replaceWith ("<div style='width:200px;height:100px;\ background-color:red;text-align:center;\ vertical-align:middle;display:table-cell'>\ <strong>new div</strong></div>"); }); }); </script> </head> <body> <p>Example paragraph.</p> <button style="margin: 20px 0px;"> click to replace </button> </body> </html> Output :Example 2: In this example we use jQuery to replace a paragraph (<p>) with an <h1> tag when the button is clicked. The replacement is done dynamically using the replaceWith() method in jQuery. XML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("button").click(function () { $("p").replaceWith($("h1")) }); }); </script> </head> <body> <p>Example paragraph.</p> <button style="margin: 20px 0px;"> click to replace </button> <h1>H1 tag</h1> </body> </html> Output :Example 3: In this example we use jQuery to replace all elements with the class X (paragraph, heading, and div) with an <h3> element containing "new element" when the button is clicked. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("button").click(function () { $(".X").replaceWith("<h3>new element</h3>") }); }); </script> </head> <body> <p class="X">Example paragraph.</p> <h1 class="X">Example H1</h1> <div style="width: fit-content; background-color: green; padding: 10px;" class="X"> Example div </div> <button style="margin: 20px 0px;"> click to replace </button> </body> </html> Output : Comment More infoAdvertise with us Next Article How to replace HTML element in jQuery ? varunkedia Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods jQuery-Questions Similar Reads How to use jQuery to Search and Replace HTML elements? 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 net 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 Add Attributes to an HTML Element in jQuery? To add attributes to an HTML element in jQuery, the attr() method can be used. This allows to set one or more attributes for a selected element, such as id, class, src, and href.Approach: Given an HTML document containing <label>, <input>, and <button> elements. The <input> e 1 min read How to select elements by attribute in jQuery ? jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The 'jQuery Selector' allows the user to manipulate HTML elements and the data inside it(D 2 min read jQuery element Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax i 1 min read How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) 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 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 the element id using jQuery ? The jQuery methods are used to change the element ID which are described below: jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of first selected element. If this method is used to 3 min read How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions 3 min read Like