Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wrap / unwrap / clone / replaceWith</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.card{border:1px solid #ccc;padding:6px;border-radius:6px}</style> </head> <body> <p id="p">Paragraph</p> <button id="wrap">wrap()</button> <button id="unwrap">unwrap()</button> <button id="clone">clone()</button> <button id="replace">replaceWith()</button> <script> $("#wrap").on("click", function(){ $("#p").wrap('<div class="card"></div>'); }); $("#unwrap").on("click", function(){ $("#p").unwrap(); }); $("#clone").on("click", function(){ $("#p").clone().insertAfter("#p").attr("id","p2").text("Clone"); }); $("#replace").on("click", function(){ $("#p").replaceWith("<h3 id='p'>Replaced P with H3</h3>"); }); </script> </body> </html>
Output