.wrapInner()
返回: jQuery
.wrapInner( wrappingElement )
描述：在匹配的元素集合的每个元素内部包裹一个HTML结构。
加入于: 1.2
.wrapInner( wrappingElement )- wrappingElement一个HTML片段、选择器表达式、jQuery对象，或者DOM元素，用来指定要在匹配的元素的内容周围包裹的结构。
加入于: 1.4
.wrapInner( function ).wrapInner()函数可以取用任何可以传递给$()函数的字符串或对象，以指定一个DOM结构。这个结构可以嵌套多层深度，但是必须只有一个最内层的元素。这个结构将包裹在匹配的元素集合中每个元素的内容周围。
设想下面的HTML：
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
使用.wrapInner()，我们可以在每个class="inner"的元素的内容周围插入一个HTML结构，如下所示：
$( ".inner" ).wrapInner( "<div class='new'></div>");
快速创建了一个新的<div>元素，并把它添加到DOM中。结果是一个新的<div>包裹了每个匹配的元素的内容：
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
这个方法的第二版本允许我们指定一个回调函数作为参数。该回调函数针对每个匹配的元素调用一次；它必须返回一个DOM元素、jQuery对象，或者HTML片段，以包裹相应的元素的内容。举个例子：
$( ".inner" ).wrapInner(function() {
return "<div class='" + this.nodeValue + "'></div>";
});
这将导致每个<div>元素有一个对应于它包裹的文本的样式类：
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
注意：如果向.wrapInner()函数传递一个选择器字符串，则输入的必须是格式正确的 HTML，并带有正确的关闭标签。一些合法有效的例子包括：
$( elem ).wrapInner( "<div class='test'></div>" ); $( elem ).wrapInner( "<div class=\"test\"></div>" );
示例
选择所有段落文本文件，并给它的内容周围包裹一个粗体标记。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
p {
background: #bbf;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrapInner( "<b></b>" );
</script>
</body>
</html>
演示结果
在<body>内部的对象周围包裹一个新创建的树。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
div {
border: 2px green solid;
margin: 2px;
padding: 2px;
}
p {
background: yellow;
margin: 2px;
padding: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
Plain old text, or is it?
<script>
$( "body" ).wrapInner( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
</body>
</html>
演示结果
选择所有段落文本文件，并给它的内容周围包裹一个粗体标记。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
p {
background: #9f9;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrapInner( document.createElement( "b" ) );
</script>
</body>
</html>
演示结果
选择所有段落文本文件，并给它的内容周围包裹一个jQuery对象。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrapInner demo</title>
<style>
p {
background: #9f9;
}
.red {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).wrapInner( $( "<span class='red'></span>" ) );
</script>
</body>
</html>
演示结果