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

ttx9n · 发表于 2013-12-20 17:10:26

本文为大家介绍下在每个匹配元素的外部插入新元素的方法，下面有个不错的示例，感兴趣的朋友可以参考下 一、方法

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>

z835648964 · 发表于 2022-8-10 22:02:29

1312315458748777

平平安安 · 发表于 2022-9-6 20:14:08

天天源码社区论坛

3t0ukmu · 发表于 2022-9-6 21:32:18

快更新啊，我擦

95nd4ba · 发表于 2022-11-10 12:28:14

哦哦哦ijhhsdj

lsc54 · 发表于 2022-11-28 13:46:49

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

64000928 · 发表于 2023-3-31 01:17:04

挺不错的东西

黑白键 · 发表于 2023-4-25 13:08:42

好东西可以可以可以可以

6q8s6p21 · 发表于 2023-7-1 20:31:37

66666666666666666666

ppwxcg · 发表于 2023-9-24 03:15:37

8888888888888888

账号		自动登录	找回密码
密码			立即注册

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

相关帖子