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. 【Discuz】-QQ互联登陆提示错误信息：Unknown column 'conuintoken' in 'field list'

    提示信息 discuz! Database Error(1054) Unknown column 'conuintoken' in 'field list'REPLACE INTO common_co ...

  2. bootstrap-datetimepicker.js学习

    之前项目运用到了这个时间控件,期间bug还是一些.抽个时间,简单地看一下. 先看一下datetimepicker.js的结构 var DateTimePicker = function(element ...

  3. 使用Unity3D Asset Server进行联合开发和版本控制

    前言:感觉在功能方面,其实Github更加强大易用,但是鉴于网络延迟问题,学一下AssetServer也是不错的.关于Asset Server的搭建步骤,其实官网论坛上已经有了解释得比较详细明了,在这 ...

  4. mybatis generator配置生成代码的问题

    接触第二种orm两天下来,一脸懵逼.mybatis是大多数公司所推崇的,相比于hibernate性能较为好的,操作更为方便的轻量级工具,所以小富就搞起这个orm.好吧,都说mybatis有个配置可以自 ...

  5. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  6. 材价看板（1）- 如何建立你的第一个kanban，看看这些暴露的问题你们有没有？

    今年负责一个老产品新团队,和几年前的指标组一样,现在的团队没有采用什么研发方法,于是我开始了团队的看板之旅. 12月22日给材价整个部门的产品研发相关人员做了一次kanban工作坊培训,    以及敏 ...

  7. OpenGL的简单研究-开端

    一直想要学习的但是没有学习的东西,大学一直在等待这个时间,终于可以闲下来研究一下这个部分的内容了. 计算机图形学,让计算机处理各种图像的东西,里面也存在很多算法和数学知识,很值得研究的一个领域,之前一 ...

  8. jquery删除数组中重复元素

    首先定义如下数组: var arr=[0,2,3,5,6,9,2]; 我们可以看到数组中存在重复元素'2'; 最后通过jquery筛选应该得到[0,2,3,5,6,9]; ok,首先我们再定义一个空数 ...

  9. JS 实现可停顿的垂直滚动

    var ScrollMiddle = { 'Odiv':document.getElementById('comment'), // 目标DOM 'Oli': document.getElementB ...

  10. CHARFORMAT2 structure

    CHARFORMAT2 structure 包含在丰富的编辑控件中的字符格式设置的信息.charformat2是微软丰富的编辑CHARFORMAT结构2扩展.微软丰富的编辑2允许您使用结构与em_ge ...