jQuery wrap() methods

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

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

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 :

jQuery Tutorial