Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wrapping HTML Around the Elements in jQuery</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ // Wrap div container with another div on document ready $(".container").wrap('<div class="wrapper"></div>'); // Wrap paragraph's content on button click $("button").click(function(){ $("p").contents().wrap("<em><b></b></em>"); }); }); </script> <style> .wrapper{ padding: 20px; background: #f0e68c; margin: 10px 0; } .container{ padding: 15px; background: #fff; font-size: 24px; } </style> </head> <body> <button type="button">Wrap Demo Text</button> <div class="container"> <p>This is demo text.</p> </div> </body> </html>
