Posted in Javascript onDecember 20, 2013
一、方法
wrap ：把所有匹配的元素，用其他元素的结构化包裹起来
wrapAll : 把所有匹配的元素，用单个元素包裹起来
wrapInner : 把匹配元素的子类用html结构包裹起来
二、实例
（1）wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("div a").wrap("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</body>
</html> firebug显示结果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> <script type="text/javascript"> </head> <body> <div> <div id="id"> <a>liuxingyu</a> </div> <div id="id"> <a>liuxingyu</a> </div> <div id="id"> <a>liuxingyu</a> </div> <div id="id"> <a>liuxingyu</a> </div> </div> </body> </html>
（2）wrapAll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("div a").wrapAll("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</body>
</html> firebug显示结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
$(function() {
$("div a").wrapAll("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<div id="id">
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</div>
</body>
</html> （3）wrapInner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
$(function() {
$("div").wrapInner("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</body>
</html> firebug显示结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
$(function() {
$("div").wrapInner("<div id='id'></div>");
});
</script>
</head>
<body>
<div>
<div id="id">
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a>
</div>
</div>
</body>
</html> 在每个匹配元素的外部插入新元素的方法
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@