jQ函数after、append、appendTo的区别

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_30360497

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量62

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fgm119/p/3922369.html

版权

1、after函数定义和用法： after() 方法在被选元素后插入指定的内容。参考：http://keleyi.com/a/bjac/cfyxd60g.htm
语法： $(selector).after(content)
实例效果体验：http://keleyi.com/keleyi/phtml/jquery/13.htm
实例代码：

<html>
<head> <title>jquery的after函数实例-柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <style> .yuanlai_keleyi_com{border:1px solid black;padding:5px} .a_keleyi_com{color:Blue;} a{color:Blue} </style> </head> <body> <br /> <span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a></span> <br /> <br /><button id="after_keleyi_com">after函数</button> <br /><br /> <a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a> <script type="text/javascript"> $("#after_ke"+"leyi_com").click(function () { $("span").after('<a href="http://keley'+'i.com" class="a_kel'+'eyi_com">这是after函数加上去的内容</a>') }) </script> </body> </html>

结果如下：

<span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a></span><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a>
即：span标签后面多了一个a标签
2、append函数
定义和用法： append() 方法在被选元素的结尾（仍然在内部）插入指定内容。参考：http://keleyi.com/a/bjac/0vpch15n.htm
语法： $(selector).append(content)
实例效果体验：http://keleyi.com/keleyi/phtml/jquery/13a.htm
实例代码：

<html>
<head> <title>jquery的append函数实例-柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <style> .yuanlai_keleyi_com{border:1px solid black;padding:5px} .a_keleyi_com{color:Blue;} a{color:Blue} </style> </head> <body> <br /> <span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span> <br /> <br /><button id="after_keleyi_com">append函数</button> <br /><br /> <a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a> <script type="text/javascript"> $("#after_ke" + "leyi_com").click(function () { $(".yuanlai_ke"+"leyi_com").append('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是append函数加上去的内容</a>') }) </script> </body> </html>

结果如下：

<span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a></span>
即：span标签里面多了一个a标签
3、appendTo函数定义和用法： appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。参考:http://keleyi.com/a/bjac/opnw2awa.htm
语法： $(content).appendTo(selector)
实例效果体验：http://keleyi.com/keleyi/phtml/jquery/13b.htm
实例代码：

<html>
<head> <title>jquery的appendTo函数实例-柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <style> .yuanlai_keleyi_com{border:1px solid black;padding:5px} a{color:Blue} .a_keleyi_com{color:Blue;} </style> </head> <body> <br /> <span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span> <br /> <br /><button id="after_keleyi_com">appendTo函数</button> <br /><br /> <a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> <script type="text/javascript"> $("#after_ke" + "leyi_com").click(function () { $('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容</a>').appendTo(".yuanlai_k" + "eleyi_com") //这样的写法是不正确的: $(".yuanlai_k" + "eleyi_com").appendTo('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容</a>') }) </script> </body> </html>