The jQuery wrapInner() method is used to wrap an HTML structure around the content of each element in the set of matched element. This method can accept any string or object that could be passed to the $() factory function.
Syntax:
$(selector).wrapInner(wrappingElement,function(index)) Parameters of jQuery wrapInner() method
| Parameter | Description |
|---|---|
| wrappingElement | It is a mandatory parameter. It specifies what HTML elements are to be wrapped around the content of each selected element. Its possible values are:HTML elementsjQuery objectsDOM elements |
| Function(index) | It is an optional parameter. It specifies a function that returns the wrapping element.Index:It provides the index position of the element in the set. |
Example of jQuery wrapInner() method
Let’s take an example to demonstrate the jQuery wrapInner() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner("<em></em>");
});
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>You can also use more than one element to wrap the specified content.
jQuery wrapInner() example 2
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner("<em><b><marquee></marquee></b></em>");
});
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Wrap a emphasized element around the content of each p element</button>
</body>
</html>In the above example we have used three tags altogether:
- emphasized <em>…</em> tag
- bold <b>…</b> tag
- <marquee>…</marquee> tag
jQuery wrapInner() example 3
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var content = "<marquee><b></b></marquee>";
$(this).wrapInner( content );
});
});
</script>
<style>
.div{ margin:12px;padding:12px; border:2px solid #666; width:100px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class="div" id="destination">Javatpoint.com</div>
<div class="div" style="background-color:lightpink;">JAVA</div>
<div class="div" style="background-color:green;">SQL</div>
<div class="div" style="background-color:lightyellow;">HTML</div>
</body>
</html>
Leave a Reply