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的区别的更多相关文章

  1. JQuery中after() append() appendTo()的区别

    首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...

  2. append, appendTo, after区别（preappend、before与这几个原理相同）

    append在被选元素结尾插入内容,是被包围在所选元素的标签内的. <script> $('p').append('<a>http</a>'); </scri ...

  3. jquery中 after append appendTo 的区别

    after:在选择的元素后面添加内容,不在选择的元素内 append:在选择的元素后面的里面添加内容 appendTo:将元素添加到选择的元素里面,而且添加的元素必须是jQuery对象

  4. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  5. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

  6. Python: dict setdault函数与collections.defaultdict()的区别

    setdault用法 >>>dd={'hy':1,'hx':2} >>>cc=dd.setdefault('hz',1) >>>cc      返 ...

  7. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  8. DLL导出函数和类的定义区别 __declspec(dllexport)

    DLL导出函数和类的定义区别 __declspec(dllexport) 是有区别的, 请看 : //定义头文件的使用方,是导出还是导入 #if defined(_DLL_API) #ifndef D ...

  9. SQL Server排序函数row_number和rank的区别

    SQL Server排序函数row_number和rank的区别 直接看测试结果 declare @table table(name varchar(100),amount int, memo var ...

  10. 详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别

    详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别 http://blog.sina.com.cn/s/blog_686999de0100jgda.html   实例: ...

随机推荐

  1. 选择排序java代码

    /** * 选择排序 * * 原理:将最小值与数组第1个即array[0]交换,第二次则忽略array[0],直接从array[1]至array[array.length-1]中 * 选择出最小值与a ...

  2. hibernate（九）多对多关联

    原文链接:http://www.orlion.ml/29/ 一.多对多单向关联 假设一个老师教多个学生,一个学生被多个老师教,这就是典型的多对多关系 配置方式是在Teacher类的getStudent ...

  3. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  4. iOS_UIImage_图片旋转

    一.目的: 有时候我们获得到的图片我们不是我们想要的方向,需要对图片进行旋转.比如:图片旋转90度180度等. 二.实现过程. 1.获取到该UIImage. 2.开启上下文. 3.上下文的具体操作. ...

  5. 【Android】[转] Android中Bitmap,byte[],Drawable相互转化

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  6. Azure Automation (3) 定期将某个Azure订阅下的所有虚拟机开关机

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 在笔者之前的文章中,我们介绍了使用Azure Automation ...

  7. 你必须知道ASP.NET知识------从IIS到httpmodule(第一篇)

    一.写在前面 最近有时间,顺便将这系列洗完,接着上文:IIS各个版本知识总结 这篇文章原本计划写到HttpHandler为止,但限于篇幅就写到httpmodule 本文有不足之处,求指正,希望我能将它 ...

  8. Bootstrap+angularjs+MVC3+分页技术+角色权限验证系统

    1.Bootstrap使用教程 相关教程: http://www.bootcss.com/components.html 页面使用代码: <script src="@Url.Conte ...

  9. StringExtensions

    public static string MakeSafeSql(this string s) { string t = s; t = t.Replace("'", "' ...

  10. 30天C#基础巩固-----值类型/引用类型，泛型，空合并操作符(??)，匿名方法

    一:值类型/引用类型的区别      值类型主要包括简单类型,枚举类型,和结构体类型等,值类型的实例通常被分配在线程堆栈上面变量保存的内容是实例数据本身.引用类型被分配在托管堆上,变量保存的是地址.引 ...