Updated March 21, 2023
Overview of jQuery wrapAll()
This article covers the full overview of one of the jQuery’s in-built methods called wrapAll(). We are going to learn how to use it, with a group of examples. jQuery is a very popular JavaScript library used by web developers to traverse and manipulate HTML DOM. It is loaded with numerous methods to handle events, CSS animations, and AJAX. The in-built method named wrapAll() of jQuery, is used to wrap the set of matched HTML elements with the provided element(s). As we know JavaScript interacts with the DOM, the wrapping of the matched elements occurs at the DOM level. The original HTML source code remains unchanged.
Syntax:
$(selector).wrapAll( wrappingElement )The method signature includes only one parameter:
wrappingElement
1. Specifies the wrapper element(s) to cover the matched elements.
2. Required
3. Possible values:
- Selector
- HTML string
- Element
- jQuery object
The wrapping element(s) covers the selected elements as a single group to form a DOM structure.
Examples of jQuery wrapAll()
Given below are examples:
Example #1
This is an example that uses the wrapAll() method to enclose a paragraph in a DIV.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
.wrap p{
background-color: blue;
width: 200px;
height: 100px;
text-align: center;
}
</style>
<script>
$( document ).ready( function () {
$(".btn").click( function () {
$("p").wrapAll('<div class= "wrap"> </div>');
});
});
</script>
</head>
<body>
<p> This is a paragraph. </p>
<button class= "btn"> Wrap </button>
</body>
</html>Output:
In the above code, we are having a paragraph (<p>) element and a button. On clicking the button, the paragraph element will be covered by a DIV element having a CSS class named ‘wrap’.
We noticed that the background color of the paragraph turns blue because styles of wrap class are applied in the paragraph which displays that it is wrapped inside the <div> tag.
Example #2
Here we will see how to wrap the elements by using another existing element.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
.wrap{
border-width: 1px;
border-color: blue;
border-style: solid;
height: 100px;
}
</style>
<script>
$( document ).ready( function () {
$(".btn").click( function () {
$("p").wrapAll( $(".wrap") );
});
});
</script>
</head>
<body>
<button class= "btn"> Click to Wrap </button>
<br>
<p> This is a paragraph </p>
<p> This is another paragraph </p>
<div class= "wrap"></div>
</body>
</html>Output:
The above code snippet renders a button, two paragraphs and one empty DIV element with a class named as ‘wrap’. On button click, a function is triggered to call the wrapAll() method on <p> tags. In the method, a jQuery selector method is passed as wrappingElement which returns elements matched by ‘wrap’ class.
When we click the button, the paragraphs get surrounded by blue borders which means the elements are wrapped
"<div class = "wrap"></div>"Output:
But we notice that, the empty <div> element still exists in the HTML. Because jQuery wrapAll doesn’t move or remove the wrapper DOM object but actually clones it to wrap around the elements without changing the original source.
Example #3
This example gives a little deeper knowledge of how wrapAll() works.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
p{ background: cyan;margin: 2px;
padding: 2px;
}
div{
border: 2px blue dotted;
margin: 2px;
padding: 2px;
text-align: center;
}
</style>
<script>
$( document ).ready( function () {
$( ".btn" ).click( function () {
$("p").wrapAll( "<div> Wrapper </div>" );
});
});
</script>
</head>
<body>
<br />
<br />
<button class= "btn"> Click to Wrap </button>
<br />
<br />
<p> This is First paragraph </p>
<span> Break </span>
<p> This is Second paragraph </p>
<span> Break </span>
<p> This is Third paragraph </p>
</body>
</html>Output:
The above code renders a button, three paragraphs and two spans between the paragraphs. Again, like the other two examples, when we click the button, the click event invokes the wrapAll() method and wrap the matched elements with a DIV.
In the previous example, we have seen that the wrapper element(s) are not moved when wrapAll() is applied. But it is not the same about the elements to be wrapped.
So… what is the difference???
Look what happens here…
The paragraphs are wrapped inside the wrapper <div>. Notice that anything between the paragraphs is left out. Here, the elements are moved, but not cloned. However, the original source code remains the same.
Example #4
This one is about unwrapping the wrapped elements. We will use jQuery’s in-built method unwrap() for it.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready( function () {
$("#btn1").click( function () {
$("p").wrapAll("<div></div>");
});
$("#btn2").click( function () {
$("p").unwrap();
});
});
</script>
<style>
div{ background-color: cyan; }
</style>
</head>
<body>
<p> Hello World! </p>
<p> Learn About wrapAll </p>
<button id= "btn1"> Wrap </button>
<button id= "btn2"> Unwrap </button>
</body>
</html>Output:
This is just a simple example of having two paragraphs and two-button elements. One button is to wrap the paragraphs and another one is to unwrap them. On clicking the Wrap button, the event invokes the wrapAll() method while on clicking the Unwrap button, unwrap() method is invoked.
When we click the Wrap button, the background color gets changed as the paragraphs are wrapped around with a DIV element. Now, let’s click the Unwrap button.
We notice background color goes off as the elements are unwrapped.
Conclusion – jQuery wrapAll()
We learned about how to use jQuery’s wrapAll() method on a webpage. We carried out a set of examples to learn its technicalities and practice the same. Therefore, we can conclude that the method is very useful and easy to implement in our web pages or applications.
Recommended Articles
This has been a guide to jQuery wrapAll(). Here we discuss the overview, syntax, and different examples of jQuery wrapAll(). you may also have a look at the following articles to learn more –
