JQUERY - WRAPPERS

Sometimes there is a need to wrap an element around an HTML element. It is same as wrapping a paper around a Burger.

Say, we have an existing <p> element,

<p> New Code </p>

And we want to wrap a <div> element with a style property around the <p> element.

<div style = "background-color: violet"> </div>

So that the <p> element looks something like,

<div style = "background-color: violet">
	<p> New Code </p>
</div>

And this becomes possible with the wrap() method provided by JQuery.

wrap()

Example :

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

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

  	<body>
    	<h1> JQuery </h1>
    	<p> New Code </p>
        
    	<button> Click Here to Wrap </button>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
            
            $('button').click( function() {
				$('p').wrap("<div> </div>");
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have a <p> element,

<p> New Code </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> New Code </p>
</div>

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

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

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

$('p').wrap("<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 the <p> element,

New Code

Changes to violet.

There are also other methods that helps wrap HTML elements. Those are wrapAll(), wrapInner() and unwrap().

wrapAll()

The wrapAll() method 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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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.

wrapInner()

The wrapInner() method is used to wrap an element inside an html element.

Say, we have a <p> element,

<p style = "background-color: yellow; height: 100px"> New Code </p>

And we want to insert a <div> element inside the <p> element.

<p style = "background-color: yellow; height: 100px">
	<div style = "background-color: violet">
		New Code
	</div>
</p>

Example :

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

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

  	<body>
    	<h1> JQuery </h1>
    	
    	<p style = "background-color: yellow; height: 100px"> New Code </p>
        
    	<button> Click Here to Inner Wrap </button>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
            
            $('button').click( function() {
				$('p').wrapInner("<div> </div>");
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have a <p> element,

<p style = "background-color: yellow; height: 100px"> New Code </p>

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

<p style = "background-color: yellow; height: 100px">
	<div style = "background-color: violet">
		New Code
	</div>
</p>

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

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

And there is the wrapInner() method, that wraps the <div> element inside the <p> element.

$('p').wrapInner("<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, it is like a box that is yellow in color(i.e. Of the <p> element).

And on button click, the color of the <div> element ,

New Code

Changes to violet.

unwrap()

The unwrap() method is used to remove the parent of the selected HTML element.

Say, we have one <p> element,

<p> First Para </p>

And have a <div> element around the <p> element. Something like the below one,

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

And we want to remove the <div> element around the <p> element.

And since, <div> is the parent of <p> element, we can use the unwrap() method to remove it.

Example :


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

  	<body>
    	<h1> JQuery </h1>
    	
    	<div style = "background-color: violet">
			<p> First Para </p>
		</div>
        
    	<button> Click Here to Wrap </button>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
            
            $('button').click( function() {
				$('p').unwrap();
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have used the JQuery statement,

$('button').click( function() {
	$('p').unwrap();
});

To remove the <div> element that is around the <p> element,

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

And the,

$('p').unwrap();

Removes the parent (i.e. <div>) of the <p> element.

Now, if you see the output, the <div> element was of color violet. And on button click, when it got removed. The violet color also got vanished.

❮❮ PREV NEXT ❯❯