JQuery Replace_ with Paragraph Element by clicking

 

In this example, we are going to click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn't clone the object but rather moves it to replace the paragraph.

 
 
 
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <style> div{ padding: 5px; width: 400px; border: 1px solid fuchsia; } p{ border: 2px solid rgb(0, 255, 247); color: rgb(43, 0, 255); margin: 3px; cursor: pointer; } </style> <script> $(document).ready(function(){ $("p").click(function(){ $(this).replaceWith($("div")); }) }) </script> </head> <body> <p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p> <br> <p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p> <br> <p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p> <br> <p>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</p> <br> <div>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively.</div> </body> </html>
Output