HTML METHODS - wrap()

The wrap() method in JQuery is used to wrap an element across a selected HTML element.

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://ajax.googleapis.com/ajax/libs/jquery/3.7.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().

❮❮ PREV NEXT ❯❯