jQuery wrapAll

—

by

jQuery wrapAll() method is used to wrap specified HTML elements around all selected elements, in a set of matched elements.

Syntax:

$(selector).wrapAll(wrappingElement)

Parameters of jQuery wrapAll() method

Parameter	Description
wrappingElement	It is a mandatory parameter. It specifies the HTML elements that you wrap around the selected elements. Its possible values are:HTML elementsjQuery objectsDOM elements

Example of jQuery wrapAll() method

Let’s take an example to demonstrate the jQuery wrapAll() method.

<!DOCTYPE html>  

<html>  

<head>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

<script>  

$(document).ready(function(){  

    $("button").click(function(){  

        $("p").wrapAll("<div></div>");  

    });  

});  

</script>  

<style>  

div{background-color: pink;}  

</style>  

</head>  

<body>  

<p>Hello Guys!</p>  

<p>This is javatpoint.com</p>  

<button>Wrap a div element around all p elements</button>  

</body>  

</html>

jQuery wrapAll() example 2

<!DOCTYPE html>  

<html>  

<head>  

<title>The jQuery Example</title>  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  

<script type="text/javascript" language="javascript">  

         $(document).ready(function() {  

            $("div").click(function () {  

               var content = "<div class='div'></div>";  

               $("div").wrapAll( content );  

            });  

         });  

      </script>  

<style>  

.div{ margin:5px;padding:2px; border:2px solid #666; width:60px;}  

</style>  

</head>  

<body>  

<p>Click on any square to wrap the squares into a new square:</p>  

<div class="div" id="destination">We are going to wrap this text</div>  

<div class="div" style="background-color:orange;">ONE</div>  

<div class="div" style="background-color:yellow;">TWO</div>  

<div class="div" style="background-color:green;">THREE</div>  

</body>  

</html>

jQuery wrapAll() example 3

A wrapAll() example with unwrap button:



<!DOCTYPE html>  



<html>  



<head>  



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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: pink;}  



</style>  



</head>  



<body>  



<p>Hello Guys!</p>  



<p>This is javatpoint.com</p>  



<button id="btn1">Wrap a div element around all p element</button>  



<button id="btn2">Unwrap</button>  



</body>  



</html>

Comments

Leave a Reply Cancel reply