jquery
jQuery wrap() Methods
The jQuery wrap() methods are used to wrap an HTML structure around the selected elements. The following wrap methods are : 

  • wrap()
  • unwrap()
  • wrapAll()
  • wrapInner()
jQuery wrap() Method
Syntax
$(selector).wrap(wrappingElement,function(index))
Parameter Description
WrappingElement It is a mandatory parameter. It specifies what HTML elements to wrap around each selected element. Its possible values are:
  • HTML elements
  • jQuery objects
  • DOM elements
Function(index) It is an optional parameter. It specifies a function that returns the wrapping element.
  • Index: It provides the index position of the element in the set.
<!DOCTYPE html>
<html>
<head>
<title>jQuery wrap() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrap("<div></div>");
    });
});
</script>
<style>
div{background-color:#FF0;}
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<p>www.freetimelearn.com</p>
<p>www.freetimelearning.com</p>
 
<button type="button" class="btn">Click Here! (wrap())</button>
 
</body>
</html>
Output :
jQuery unwrap() Method
The jQuery unwrap() method is used to remove parent element of the selected elements.
Syntax
$(selector).unwrap()
<!DOCTYPE html>
<html>
<head>
<title>jQuery unwrap() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").unwrap();
    });
});
</script>
<style>
div{background-color:#F90; color:#FFF;}
article{background-color:#0099da; color:#fff;}
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<div>
  <p>www.freetimelearn.com</p>
</div>
 
<article>
  <p>www.freetimelearning.com</p>
</article>
 
<button type="button" class="btn">Click Here! (unwrap())</button>
 
</body>
</html>
Output :
jQuery wrapAll() Method
The jQuery wrapAll() method is used to wrap specified HTML elements around all selected elements.
Syntax
$(selector).wrapAll(wrappingElement)
Parameter Description
wrappingElement It is a mandatory parameter. It Specifies what HTML element(s) to wrap around the selected elements

Possible values:

  • HTML elements
  • jQuery objects
  • DOM elements
<!DOCTYPE html>
<html>
<head>
<title>jQuery wrapAll() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapAll("<div></div>");
    });
});
</script>
<style>
div{background-color:#F90;}
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<p>www.freetimelearn.com</p>
<p>www.freetimelearning.com</p>
 
<button type="button" class="btn">Click Here! (wrapAll())</button>
 
</body>
</html>
Output :
jQuery wrapInner() Method
The jQuery wrapInner() method is used to wrap an HTML structure around the content of each element in the set of matched element. This method can accept any string or object that could be passed to the $() factory function.
Syntax
$(selector).wrapInner(wrappingElement,function(index))
Parameter Description
wrappingElement It is a mandatory parameter. It Specifies what HTML element(s) to wrap around the content of each selected element

Possible values:

  • HTML elements
  • jQuery objects
  • DOM elements
function(index) It Specifies a function that returns the wrapping element
  • index : Returns the index position of the element in the set
<!DOCTYPE html>
<html>
<head>
<title>jQuery wrapInner() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").wrapInner("<b></b>");
    });
});
</script>
<style>
div{background-color:#F90;}
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<p>www.freetimelearn.com</p>
<p>www.freetimelearning.com</p>
 
<button type="button" class="btn">Click Here! (wrapInnerl())</button>
 
</body>
</html>
Output :