快捷導(dǎo)航

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

更新時間：2013年12月20日 17:10:26 作者：

本文為大家介紹下在每個匹配元素的外部插入新元素的方法，下面有個不錯的示例，感興趣的朋友可以參考下

一、方法

wrap ：把所有匹配的元素，用其他元素的結(jié)構(gòu)化包裹起來

wrapAll : 把所有匹配的元素，用單個元素包裹起來

wrapInner : 把匹配元素的子類用html結(jié)構(gòu)包裹起來

二、實(shí)例

（1）wrap

復(fù)制代碼代碼如下:

 
<!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顯示結(jié)果：

復(fù)制代碼代碼如下:

 
<!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

復(fù)制代碼代碼如下:

 
<!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顯示結(jié)果：

復(fù)制代碼代碼如下:

 
<!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

復(fù)制代碼代碼如下:

 
<!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顯示結(jié)果：

復(fù)制代碼代碼如下:

 
<!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> 