jQuery .wrapInner()
Syntax and Description
.wrapInner() wraps an HTML structure around the content of each element in the set of matched elements.
.wrapInner(wrappingElement)
wrappingElement: An HTML snippet, a selector expression, a jQuery object, or a DOM element specifying the structure to wrap around the matched elements.wrapInner(wrappingFunction)
wrappingFunction: A callback function that generates a structure to wrap around the matched elements
Its return value is the jQuery object, for chaining purposes.
For the following HTML elements
<div class="container">
<div class="inner">Hello</div>
<div class="inner">InnerText</div>
</div>
To Insert an HTML structure around the content of the inner <div>
elements we can do as follows:
$('.inner').wrapInner('<div class="new" />');
Results
<div class="container">
<div class="inner"> <div class="new">Hello</div>
</div>//from www.ja v a 2 s . c o m
<div class="inner">
<div class="new">InnerText</div>
</div>
</div>
A callback function can be passed in to be called once for every matched element.
It should return a DOM element, jQuery object, or HTML snippet in which to wrap the content of the corresponding element. For example:
$('.inner').wrapInner(function() {
return '<div class="' + this.nodeValue + '" />';
});
Results
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>/*from www . j av a 2s . c o m*/
<div class="inner">
<div class="InnerText">InnerText</div>
</div>
</div>
Add border with wrapInner
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww .j ava 2 s .com-->
$("p").wrapInner("<div></div>");
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>
wrapInner with new created element
The following code calls wrapInner method and passes in new created element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww . ja v a 2 s . c o m-->
$("p").wrapInner(document.createElement("b"));
});
</script>
<style>
div { border:2px green solid;}
</style>
</head>
<body>
<body>
<p>java2s.com</p>
</body>
</html>