Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery wrapAll() Method
jQuery | wrapAll() Method: Learn about the jQuery wrapAll() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 17, 2022
wrapAll() Method
By the word 'wrap' we can presume that it will cover the selected element with some specified content. Wrapping something means covering it in order to protect it. Therefore, the jQuery wrapAll() method also does the same job. The wrapAll() method helps to wrap all of the selected elements with some selected content all around. It will execute on every matched element on the page.
wrapAll() Method Syntax
$('selector').wrapAll('Wrapping-content');
The wrapAll() method accepts only one parameter – wrappingContent. The selected content or element is passed in order to wrap the selector with that. The wrappingContent accepts HTML elements, DOM elements, jQuery objects. The wrapAll() method returns the changed/wrapped element. The methods – wrap(), wrapInner(), and wrapAll() are all very similar in implementation with a slight change in each of them.
The following example shows the implementation of this method more precisely. When the button provided is clicked, all the selected element gets wrapped into some predefined properties.
jQuery wrapAll() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
span{
color: teal;
font-size: larger;
font-weight: bolder;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h2>jQuery - Wrap All</h2>
<p>Click the following button to wrap all the elements with some content.</p>
<button>Wrap All</button>
<hr>
<h4>Hey Everybody !!!</h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('h4').wrapAll('<span></span>');
})
});
</script>
</html>
Output:
