手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >在每个匹配元素的外部插入新元素的方法
在每个匹配元素的外部插入新元素的方法
摘要:一、方法wrap:把所有匹配的元素,用其他元素的结构化包裹起来wrapAll:把所有匹配的元素,用单个元素包裹起来wrapInner:把匹配...

一、方法

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>

【在每个匹配元素的外部插入新元素的方法】相关文章:

JS验证IP,子网掩码,网关和MAC的方法

原生JS和JQuery动态添加、删除表格行的方法

jQuery获得字体颜色16位码的方法

JS动画效果打开、关闭层的实现方法

JavaScript获取两个数组交集的方法

js操作css属性实现div层展开关闭效果的方法

Node.js重新刷新session过期时间的方法

JavaScript判断数组是否包含指定元素的方法

一个很简单的办法实现TD的加亮效果.

jquery实现图片左右切换的方法

精品推荐
分类导航