How to Wrap an Element with Another Div Using jQuery? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report We will see how to wrap an element with another div in jQuery. We will simply wrap an element inside a div tag in jQuery. These are the following approaches: Table of Content Using wrap() method Using wrap.inner() methodApproach 1: Using wrap() method We include the jQuery library in the <head> section.We have a <div> with the ID elementToWrap, which contains the content you want to wrap.In the jQuery script, we use the .wrap() method to wrap #elementToWrap with another <div> with the class wrapper.Optional CSS is provided to style the wrapper <div> for demonstration purposes.Example: This example shows the implementation of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width , initial-scale=1.0"> <title>Wrap Element with Another Div</title> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { // Wrap the element with another <div> $('#elementToWrap').wrap('<div class="wrapper"></div>'); }); </script> <style> /* Styling for wrapper and wrapped divs */ .wrapper { border: 2px solid #ccc; padding: 10px; margin: 20px; /* Added margin for spacing */ } #elementToWrap { background-color: #f0f0f0; padding: 10px; } </style> </head> <body> <!-- The element you want to wrap --> <div id="elementToWrap"> Wrapped content </div> </body> </html> Output: Approach 2: Using wrap.inner() methodIn this appraoch, we wrap the content inside a <div> with the ID elementToWrap using jQuery's .wrapInner() method, applying styles to the wrapper and wrapped <div> for visual distinction, including borders, background colors, padding, margin, font size, and box shadow. Example: This example shows the implementation of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wrap Element with Another Div</title> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { // Wrap the content inside the // element with another <div> $('#elementToWrap').wrapInner('<div class="wrapper"></div>'); }); </script> <style> /* Styling for wrapper and wrapped divs */ .wrapper { border: 2px solid #007bff; /* Blue border */ background-color: #f0f0f0; /* Light gray background */ padding: 10px; margin: 20px; /* Added margin for spacing */ } #elementToWrap { font-size: 16px; /* Larger font size */ color: #333; /* Dark text color */ background-color: #fff; /* White background */ padding: 20px; /* Increased padding */ border: 1px solid #ccc; /* Light gray border */ border-radius: 5px; /* Rounded corners */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Box shadow */ } </style> </head> <body> <!-- The element you want to wrap --> <div id="elementToWrap"> This is the content you want to wrap. </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a div using jQuery with style tag ? K kohliami558i Follow Improve Article Tags : Web Technologies JQuery Similar Reads How to move one DIV element inside another using jQuery ? In this article, we will learn to move one HTML div element inside another using jQuery. The HTML div element is used to define a division or a section in an HTML document.Method used: parent(): This method is used to get the parent of each element in the current set of matched elements, optionally 2 min read How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) 2 min read Create a Div Element using jQuery In this article, we will see how to create a <div> element using jQuery. We can create a div element with the following steps: Steps to Create a Div ElementCreate a new <div> element.Choose a parent element, where to put this newly created element.Put the created div element into the par 2 min read How to create a div element in jQuery ? There are various method to create HTML element inside an HTML document using JQuery. But the simplest of all is append() and prepend() method. Method 1: Using prepend() Method: The prepend() method is used to insert a specified content at the beginning of the selected element. Example: This example 2 min read How to create a div using jQuery with style tag ? Creating an <div> element with a style tag using jQuery can be done in the following steps. Steps: Create a new <div> element.Create an object with all the styles that we want to apply.Choose a parent element, where to put this newly created element.Put the created div element into the p 2 min read How to animate div width and height on mouse hover using jQuery ? In order to animate the div width and height on mouse hover, we can use the jQuery animate() method along with the mouseenter() and mouseleave() methods. .animate() method: The animate() method changes the state of the element with CSS style. Syntax: $(selector).animate({styles}, para1, para2, para3 3 min read Like