To wrap and unwrap elements inside a div or selected HTML elements using jQuery; In this tutorial, we will learn how to unwrap anchor tag links without removing the text content or elements. Using the jQuery wrap (), wrapAll() & unwrap method, You can easily wrap & unwrap selected HTML elements.
How to wrap multiple selected html elements ? How to remove wrapper elements but keep text content as it is using jQuery? jQuery provide several methods for performing this operation such as wrap(), wrapAll(), unwrap().
How to Wrap & Unwrap Multiple Html Elements in jQuery
In jQuery, you can wrap and unwrap multiple HTML elements using various methods provided by the library. Wrapping involves enclosing a set of elements with a new parent element, while unwrapping involves removing the parent element and keeping its children as siblings. Here’s how you can do it:
jQuery wrap() Method
Using jQuery wrap () to wrap specified HTML elements around each selected element.
Syntax wrap() Method
$(selector).wrap(element,function(index));
Parameters of wrap() method
- Element:- It is a mandatory parameter.
- Function(index) It is an optional parameter.
jQuery wrap() method By Example
This example will demostrate you how use wrap method to selected html elements. Wrap elements inside a div using jQuery Wrap method.
<!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 tutsmake.com</p>
<button id="wrapBtn">Wrap a div element around each myClass element</button>
</div>
</body>
</html>
Output
Hello Programmers!
This is tutsmake.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.
jQuery wrapAll() method By Example
This example will demostrate you how use wrapAll method to selected html elements.
<!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 tutsmake.com</p>
<button id="wrapBtn">Wrap a div element around each myClass1 element</button>
</div>
</body>
</html>
Output
Hello Programmers!
This is tutsmake.com
jQuery unwrap() Method
Using jQuery unwrap () to unwrap specified HTML elements around each selected element.
Syntax unwrap() Method
$(selector).unwrap();
jQuery unwrap() method By Example
This example will demostrate you how use unwrap method to selected html elements.
<!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>
Output
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.
