On click, replace each paragraph with a jQuery div object that is already in the DOM. Notice it doesn't clone the object but rather moves it to replace the paragraph.

Edit code and click me	Your Result (Some examples do not work in Google Chrome):
<!DOCTYPE html> <html> <head> <style> div { border:2px solid blue; color:red; margin:3px; } p { border:2px solid red; color:blue; margin:3px; cursor:pointer; } </style> <script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").click(function () { $(this).replaceWith($("div")); }); }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <div>Replaced!</div> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself