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 实例: ...
随机推荐
- Android 软件开发之如何使用Eclipse Debug调试程序详解及Eclipse常用快捷键（转）
1.在程序中添加一个断点如果所示:在Eclipse中添加了一个程序断点 在Eclipse中一共有三种添加断点的方法 第一种: 在红框区域右键出现菜单后点击第一项 Toggle Breakpoint 将 ...
- SQL Server中参数化SQL写法遇到parameter sniff ，导致不合理执行计划重用的一种解决方案
parameter sniff问题是重用其他参数生成的执行计划,导致当前参数采用该执行计划非最优化的现象.想必熟悉数据的同学都应该知道,产生parameter sniff最典型的问题就是使用了参数化的 ...
- [New Portal]Windows Azure Virtual Machine (18) Azure Virtual Machine内部IP和外部IP
<Windows Azure Platform 系列文章目录> 在开始本章内容之前,请读者熟悉以下2篇博文: [New Portal]Windows Azure Virtual ...
- 10套免费的 Photoshop UI 元素以及 PSD 素材
免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组 ...
- 使用Python进行GUI操作自动化
前言 本文介绍怎样使用Python进行跨平台的GUI操作的,其中使用的一个工具包是pyautogui,PyAutoGUI可以模拟鼠标的移动.点击.拖拽,键盘按键输入.按住操作,以及鼠标+键盘的热键同时 ...
- SqlCommandBuilder实现大数据更新
/// <param name="table">准备更新的DataTable新数据</param> /// <param name="Tab ...
- jquery.form.js实现异步上传
前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...
- Web实时通信
学习SignalR,可以从<实时数据显示--SignalR实例演示>http://www.cnblogs.com/insus/p/5619422.html 开始. 此篇只是把数据库的数据实 ...
- LINQ的Except方法
在两个集合中,左边集合减去右边集合的元素: source code: List<int> a = new List<int>{ { }, { }, { } }; List< ...
- 反射(Reflection)的SetValue遇上DBNULL转换为string
有网友回馈说提供的代码有bug.你可以从这个链接下载得到:http://www.cnblogs.com/insus/p/3384472.html 其中有一个Utility,它是把DataTable转换 ...