HTML METHODS - wrapAll()

The wrapAll() method in JQuery is used to wrap an element across all the selected HTML elements.

Say, we have three <p> elements,

<p> First Para </p>
<p> Second Para </p>
<p> Third Para </p>

And want to wrap a <div> element across all the <p> elements. Something like the below one,

<div style = "background-color: violet">
	<p> First Para </p>
	<p> Second Para </p>
	<p> Third Para </p>
</div>

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>

	<style>
		div {background-color: violet;}
	</style>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> First Para </p>
		<p> Second Para </p>
		<p> Third Para </p>
        
    	<button> Click Here to Wrap </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
            
            $('button').click( function() {
				$('p').wrapAll("<div> </div>");
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have three <p> elements,

<p> First Para </p>
<p> Second Para </p>
<p> Third Para </p>

And we want to wrap the <div> element around the <p> element on button click. So that it looks somewhat like,

<div style = "background-color: violet">
	<p> First Para </p>
	<p> Second Para </p>
	<p> Third Para </p>
</div>

And on button click, the below JQuery statement gets triggered,

$('button').click( function() {
	$('p').wrapAll("<div> </div>");
});

And there is the wrapAll() method, that wraps all the <div> element around the <p> element.

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

Just note that the style property for <div> is declared within the <style> tags.

<style>
	div {background-color: violet;}
</style>

And if you see the output, on button click, the color of all the <p> elements,

<p> First Para </p>
<p> Second Para </p>
<p> Third Para </p>

Changes to violet.

❮❮ PREV NEXT ❯❯