jQuery wrap and unwrap multiple html element; In this tutorial, i am going to show you how to wrap and unwrap html element using the jQuery wrap (), wrapAll() & unwrap method.
jQuery Wrap and Unwrap Multiple Html Element
- jQuery wrap() Method
- jQuery wrapAll() Method
- jQuery unwrap() Method
jQuery wrap() Method
Using jQuery wrap () to wrap specified HTML elements around each selected element.
Syntax of jQuery wrap() Method
$(selector).wrap(element,function(index));
Parameters of jQuery wrap() Method
- Element :- It is a mandatory parameter.
- Function(index) It is an optional parameter.
Example – jquery wrap multiple elements
Example for Wrap elements inside a div using jQuery Wrap method; as shown below:
<!DOCTYPE html> <html> <head> <title>Example Demo Of jQuery Wrap Method</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#wrapBtn").click(function(){ $(".myClass").wrap("<div class='wrapDiv'></div>"); }); }); </script> <style> .ctrCls{ padding: 15px; border: 12px solid #23384E; background: #28BAA2; margin-top: 10px; } .wrapDiv{background-color: red;} </style> </head> <body> <div class="ctrCls"> <p class="myClass">Hello Programmers!</p> <p class="myClass">This is Lara.com</p> <button id="wrapBtn">Wrap a div element around each myClass element</button> </div> </body> </html>
Demo – jquery wrap multiple elements
Hello Programmers!
This is laratutorials.com
jQuery wrapAll() Method
In a set of matched elements, using jQuery wrapAll () to wrap specified HTML elements around all selected elements.
Syntax wrapAll() Method
$(selector).wrapAll(Element);
Parameters of wrapAll () method
- Element :- It is a mandatory parameter.
Example – jQuery wrapAll() method
The following example for how use wrapAll method to selected html elements; as shown below:
<!DOCTYPE html> <html> <head> <title>Example Demo Of jQuery WrapAll Method</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#wrapBtn").click(function(){ $(".myClass1").wrapAll("<div class='wrapDiv'></div>"); }); }); </script> <style> .ctrCls{ padding: 15px; border: 12px solid #23384E; background: #28BAA2; margin-top: 10px; } .wrapDiv{background-color: red;} </style> </head> <body> <div class="ctrCls"> <p class="myClass1">Hello Programmers!</p> <p class="myClass1">This is laratutorials.com</p> <button id="wrapBtn">Wrap a div element around each myClass1 element</button> </div> </body> </html>
Demo for jQuery wrapAll() method
Hello Programmers!
This is laratutorials.com
jQuery unwrap() Method
Using jQuery unwrap () to unwrap specified HTML elements around each selected element.
Syntax unwrap() Method
$(selector).unwrap();
Example – jQuery unwrap() method
Example for how use unwrap method to selected html elements; as shown below:
<!DOCTYPE html> <html> <head> <title>Example Demo Of jQuery unwrap Method</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#unwrap").click(function(){ $(".link").wrapAll(""); $("p").find("a.link").contents().unwrap(); }); }); </script> <style> .ctrCls{ padding: 15px; border: 12px solid #23384E; background: #28BAA2; margin-top: 10px; } </style> </head> <body> <div class="ctrCls"> <p>If you click on the following button, it will remove the anchor tag from <a href="#" class="link"> this link </a>, but will keep the text content as it is.</p> <button type="button" id="unwrap">Click Here For Unwrap Link</button> </div> </body> </html>
Demo for jQuery unwrap() method
If you click on the following button, it will remove the anchor tag from this link , but will keep the text content as it is.