jQuery Wrap and Unwrap Multiple Html Element

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

Example Demo Of jQuery Wrap Method

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

Example Demo Of 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

Example Demo Of 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.

jQuery Wrap and Unwrap Multiple Html Element