Updated July 4, 2023
Introduction to jQuery wrapInner()
wrapInner() in jQuery is a pre-defined function available with the JavaScript library, and it is used whenever there is a requirement for creating a wrap element for each of the other matching HTML elements in the page. The syntax for this method is $(selector).wrapInner(wrappingElement, function(index)), where wrappingElement is a mandatory field that indicates the element for wrapping and function (index) is an elective callback method used for creating the wrapping element for the wrapInner() method.
Syntax:
$( selector ).wrapInner( wrappingElement, function(index))The method signature includes two parameters :
1. wrappingElement
- Specifies the structure to wrap around the content of the selected element.
- Required.
Possible values:
- HTML snippet
- Selector expression
- DOM element
- jQuery object
2. function (index)
- Specifies a callback function which generates the wrapping element.
- Optional.
index:
- Receives the index position of the element in the set as an argument.
- Function(Integer index) => String
Examples of jQuery wrapInner()
WrapInner() is an inbuilt method in jQuery, given below are the examples:
Example #1
The example demonstrates how wrapInner() method is used to wrap the<b> tag around the paragraph element.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> wrapInner example 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$( document ).ready( function () {
$(" button ").click( function () {
$("p").wrapInner("<b></b>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Wrap b tag around the content of paragraph</button>
</body>
</html>Output:
In this example, there is an <p> element and a button. On clicking the button, the wrapInner() function is called which wraps the <b> around the paragraph text.
After clicking the button, the text gets bold because the <p> content is wrapped by the <b> tag and this will be rendered in the DOM as <p><b>This is a paragraph.</b></p>
Example #2
Let’s see example of wrapInner(), this time we are going to wrap multiple matched elements.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> wrapInner example 2</title>
<style>
div {
background: #bbf;
width: 300px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<p> This is third paragraph </p>
<br />
<button>Wrap div tag around the content of paragraph</button>
<script>
$( document ).ready( function () {
$(" button ").click( function () {
$("p").wrapInner("<div></div>");
});
});
</script>
</body>
</html>Output:
In the above code, we are having three paragraphs and a button. On clicking the button, wrapInner() method is called on all the <p> elements to wrap a <div> tag around them.
We observed that the background color of all paragraphs is changed as each one is wrapped by the <div> tag having a background color.
Example #3
In this example, we are going to pass one of the possible argument values of the wrapInner() function which is a callback function.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> wrapInner example 3</title>
<style>
div {
border: 1px solid #bbf;
width: 400px;
text-align: center;
margin-left: 70px;
margin-top: 50px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<p> This is <span> first </span> paragraph </p>
<p> This is <span> second </span> paragraph </p>
<p> This is <span> third </span> paragraph </p>
<br />
<button> Covert text to italic </button>
<br/>
<br/>
</div>
<script>
$( document ).ready( function () {
$(" button ").click( function () {
$("span").wrapInner( function() {
return '<i></i>'
} );
});
});
</script>
</body>
</html>Output:
The above code renders three paragraphs and a button. On button click event, wrapInner() method is executed with argument value as a callback function. The callback function returns a <i></i> tag to wrap around the matched span elements.
When we hit the button, we can see the text wrapped in a span tag is Italicized. The italic tag <i> wraps the span elements and therefore, only span elements’ text style is changed to italic.
Example #4
In this example, we will see how to use a jQuery selector or jQuery object with wrapInner().
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> wrapInner example 4</title>
<style>
body {
text-align: center;}
div {
text-align: center;
background: #bba;
}
body {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrapper"></div>
<p> This is <span> first </span> paragraph </p>
<p> This is <span> second </span> paragraph </p>
<p> This is <span> third </span> paragraph </p>
<br />
<button> Covert</button>
<br/>
<br/>
<script>
console.log($("wrapper"));
$( document ).ready( function () {
$(" button ").click( function () {
$("span").wrapInner( $(".wrapper") );
});
});
</script>
</body>
</html>Output:
As we can see once again, there are three paragraphs and a button. On button click, wrapInner() is triggered with a jQuery selector as the argument value. The selector returns a <div> which is already residing in the original source code, by matching it with the class name.
Consequently, after clicking the button, the <div> wraps the span tags and their background color turn grey. That’s how, we can use jQuery selector or object too, as an argument of wrapInner() in order to do various types of DOM manipulations.
Conclusion
We have learned and exercised a set of examples to use jQuery’s in-built wrapping method wrapInner(). We can use it to loop through a set of elements and wrap each of them with the specified HTML structure of the DOM structure. The method can be utilized to design creative user interfaces for websites and applications.
Recommended Articles
This is a guide to jQuery wrapInner(). Here we discuss the Introduction, syntax, and examples. You may also have a look at the following articles to learn more –
