From jQuery JavaScript Library
« Back to Manipulation
wrapInner( html )
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Arguments:| html | String | |
|---|
| A string of HTML that will be created on the fly and wrapped around the target. |
Examples:| Name | Type |
|---|
Selects all paragraphs and wraps a bold tag around each of its contents.
$("p").wrapInner("<b></b>");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").wrapInner("<b></b>");
});
</script>
<style>p { background:#bbf; }</style>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>
Wraps a newly created tree of objects around the inside of the body.
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
});
</script>
<style>
div { border:2px green solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
</style>
</head>
<body>
Plain old text, or is it?
</body>
</html>
wrapInner( elem )
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Arguments:| elem | Element | |
|---|
| A DOM element that will be wrapped around the target. |
Examples:| Name | Type |
|---|
Selects all paragraphs and wraps a bold tag around each of its contents.
$("p").wrapInner(document.createElement("b"));
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").wrapInner(document.createElement("b"));
});
</script>
<style>p { background:#9f9; }</style>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>
Selects all paragraphs and wraps a jQuery object around each of its contents.
$("p").wrapInner($("<span class='red'></span>"));
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").wrapInner($("<span class='red'></span>"));
});
</script>
<style>
p { background:#9f9; }
.red { color:red; }
</style>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>