您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
在每个匹配元素的外部插入新元素的方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本文为大家介绍下在每个匹配元素的外部插入新元素的方法，下面有个不错的示例，感兴趣的朋友可以参考下
一、方法 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>- 上一个程序编程： javascript六种数据类型以及特殊注意点
- 下一个程序编程： Javascript selection的兼容性写法
