jQ函数after、append、appendTo的区别
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()的区别
首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...
- append, appendTo, after区别（preappend、before与这几个原理相同）
append在被选元素结尾插入内容,是被包围在所选元素的标签内的. <script> $('p').append('<a>http</a>'); </scri ...
- jquery中 after append appendTo 的区别
after:在选择的元素后面添加内容,不在选择的元素内 append:在选择的元素后面的里面添加内容 appendTo:将元素添加到选择的元素里面,而且添加的元素必须是jQuery对象
- JQuery之append和appendTo的区别，还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- 比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
- Python: dict setdault函数与collections.defaultdict()的区别
setdault用法 >>>dd={'hy':1,'hx':2} >>>cc=dd.setdefault('hz',1) >>>cc 返 ...
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- DLL导出函数和类的定义区别 __declspec(dllexport)
DLL导出函数和类的定义区别 __declspec(dllexport) 是有区别的, 请看 : //定义头文件的使用方,是导出还是导入 #if defined(_DLL_API) #ifndef D ...
- SQL Server排序函数row_number和rank的区别
SQL Server排序函数row_number和rank的区别 直接看测试结果 declare @table table(name varchar(100),amount int, memo var ...
- 详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别
详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别 http://blog.sina.com.cn/s/blog_686999de0100jgda.html 实例: ...
随机推荐
- Shader预处理宏、内置状态变量、多版本编译等
预定义shader预处理宏: Target platform: SHADER_API_OPENGL - desktop OpenGL SHADER_API_D3D9 - Direct3D SHADER ...
- 一步一步教你安装openstack
openstack,安装的门槛比较高,而且相当麻烦,很多的安装文档作者省了不少安装步骤.这对初学的人带来了很大的麻烦,也许作者轻易节省一步,就会创成后面的安装失败.而且初学者由于对openstack不 ...
- Tcl Tk Introduction
Tcl Tk Introduction eryar@163.com 摘要Abstract:Tcl/Tck脚本可以很容易实现用户自定义的命令,方便的创建图形化的用户界面GUI,所以Tcl和Tk的应用领域 ...
- 移动web开发之视口viewport
× 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...
- NodeJs连接Oracle数据库
nodejs连接oracle数据库,各个平台的官方详情文档:https://github.com/oracle/node-oracledb/blob/master/INSTALL.md 我的nodej ...
- 360wifi使用方法|360wifi使用教程
360随身WiFi是一款超迷你.操作极其简单的无线路由器,只需把360随身WiFi插到一台可以上网的电脑上,不用做任何设置,就把连接有线网络的电脑转变成接入点,实现与其他终端的网络共享.简单方便实现手 ...
- 百度统计接口demo中错误
百度统计接口中的demo(PHP版本)下载下来配置后运行出错,应该是编写demo时用的php版本比较低吧,作如下几处修改就好了 一:把CURLOPT_SSL_VERIFYHOST的值改为2,因为1版本 ...
- Windows Azure Traffic Manager (6) 使用Traffic Manager，实现本地应用+云端应用的高可用
<Windows Azure Platform 系列文章目录> 注意:本文介绍的是使用国内由世纪互联运维的Azure China服务. 以前的Traffic Manager,背后的Serv ...
- 11款扁平化设计的 Twitter Bootstrap 主题和模板
扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...
- 大M法（Big M Method）
前面一篇讲的单纯形方法的实现,但程序输入的必须是已经有初始基本可行解的单纯形表. 但实际问题中很少有现成的基本可行解,比如以下这个问题: min f(x) = –3x1 +x2 + x3 s.t. x ...