jQ函数after、append、appendTo的区别
来源:互联网 发布:数据库程序设计难吗 编辑:程序博客网 时间:2024/06/04 18:06
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>
结果如下:
<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标签
效果和append函数是一样,只不过它们的写法是反着来写的而已
appendTo函数的一个实际应用:http://keleyi.com/a/bjac/jp71q5jt.htm
原文:http://keleyi.com/a/bjac/2oncd079.htm
- jQ函数after、append、appendTo的区别
- jquery after append appendTo三个函数的区别
- jquery after append appendTo三个函数的区别
- jquery after append appendTo三个函数的区别
- jquery after append appendTo三个函数的区别
- jquery after append appendTo三个函数的区别
- jquery after append appendTo三个函数的区别
- jq-append和appendTo 的区别
- Jquery append appendTo after的区别
- jquery append appendTo after 区别
- Jquery的append/after/appendTo
- 区别 after()|append() after()|prepend() appendTo() | prependTo()
- jquery after before append appendto prepend prependto的区别
- appendTo & append & after & appendChild
- append()和appendTo()的区别
- append 和 appendTo的区别
- append与 appendTo的区别
- jQuery中append和appendTo函数的区别详解
- Linux下pthread简单样例
- RSA加解密初体验--证书
- 2017年网易互联网内推笔试题-数字游戏
- 漫谈SOA(面向服务架构)
- 从JVM内存管理的角度谈谈静态方法和静态属性
- jQ函数after、append、appendTo的区别
- openstack-I版启动虚拟机XML文件
- vs2013多个项目中设置单独启动
- Hibernate一对一 主键关联映射(one-to-one)
- Camera.js——百叶窗幻灯片(超炫)
- Android触摸事件总结
- xlrd xlwt xlutils安装出错解决方案
- style——基本使用
- linux的nohup命令的用法