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. .NET面试题解析(01)-值类型与引用类型

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 常见面试题目: 1. 值类型和引用类型的区别? 2. 结构和类的区别? 3. delegate是引用类型还 ...

  2. px 与 dp, sp换算公式？

    PPI = Pixels per inch,每英寸上的像素数,即 "像素密度" xhdpi: 2.0 hdpi: 1.5 mdpi: 1.0 (baseline) ldpi: 0. ...

  3. 在Abp中执行sql语句

    目录 前言 最近使用ABP(ASP.NET Boilerplate)做项目,有些查询(或存储过程)直接使用sql语句会更方便一点. 定义一个接口 在Core项目中定义一个接口,如:ISqlExecut ...

  4. IEE修改最大连接数

    IEE版本:5.1.40 1.查看当前IEE最大连接数(缺省值) mysql> show variables like 'max_connections'; +----------------- ...

  5. Linux - Screen

    GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...

  6. Hadoop阅读笔记（三）——深入MapReduce排序和单表连接

    继上篇了解了使用MapReduce计算平均数以及去重后,我们再来一探MapReduce在排序以及单表关联上的处理方法.在MapReduce系列的第一篇就有说过,MapReduce不仅是一种分布式的计算 ...

  7. 经验总结：HTTP返回505错误小记

    昨天调试代码的时候,用http请求一个图片,返回的结果为如下: HTTP/1.1 505 HTTP Version Not Supported Server: Apache-Coyote/1.1 Da ...

  8. webstom设置和monokia配色方案

    首先,最后配色结果如下: 本次配色参考几个文档: http://frontenddev.org/article/webstorm-portal-1-subject-and-match-colors.h ...

  9. SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程（支持单表或多表结查集分页）

    SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程,支持单表或多表结查集分页,存储过程如下: /******************/ --Author:梦在旅 ...

  10. linux专题一之文件管理（目录结构、创建、查看、删除、移动）

    在linux系统中一切都是文件./ 在linux中为根目录,是一切文件的根目录.本文将通过linux系统的目录结构和与linux文件操作有关的相关命令(touch.mkdir.cp.mv.mv.les ...