在每个匹配元素的外部插入新元素的方法

所属分类：网络编程 / JavaScript 阅读数： 656

收藏 0赞 0分享

一、方法

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> 