How to replace HTML element in jQuery ?

Last Updated : 22 Apr, 2021

We can replace HTML elements using the jQuery .replaceWith() method. With the jQuery replaceWith() method, we can replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

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: We fetch the element we need to replace and write a new element in place of it.

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: We can also replace an HTML element with another existing HTML element.

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: We can replace multiple HTML elements at the same time.

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> 