HTML METHODS - wrapInner()

The wrapInner() method in JQuery 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://ajax.googleapis.com/ajax/libs/jquery/3.7.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.

❮❮ PREV NEXT ❯❯