Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery wrapInner() Method
jQuery | wrapInner() Method: Learn about the jQuery wrapInner() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 17, 2022
wrapInner() Method
By the word 'wrap' we can presume that it will cover the selected element with some specified content. Wrapping something means covering it in order to protect it. Therefore, the jQuery wrapInner() method also does the same job. The wrapInner() method helps to wrap a set of elements with some selected content all around. It will execute on every matched element on the page. Using this method, we can create nested elements on the page one by one. New HTML elements with classes can be inserted into an already-created element. Hence, the wrapInner() method is a lot similar to the wrap() method of jQuery.
wrapInner() Method Syntax
$('selector').wrapInner('Wrapping-content', function());
The wrapInner() method accepts two parameters – wrappingContent & function. The selected content or element is passed in order to wrap the selector with that. The wrappingContent accepts HTML elements, DOM elements, jQuery objects. The function is an optional parameter that can be passed to execute some set of instructions. The wrapInner() method returns the changed/wrapped element.
The following example shows the implementation of this method more precisely. When the button provided is clicked, the selected element gets wrapped with a new HTML element.
jQuery wrapInner() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
span{
color: teal;
font-size: larger;
font-weight: bolder;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h2>jQuery - Wrap Inner</h2>
<p>Click the following button to inner wrap the element with some content.</p>
<button>Wrap Inner</button>
<hr>
<h3>Hey Everybody !!!</h3>
<h4>Welcome to Include Help.</h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('h3').wrapInner('<div class="new">This is new Div. </div>');
$('h4').wrapInner('<span></span>');
})
});
</script>
</html>
Output:
