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. How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class

    This post will cover the basic setup and creation of an application with web content for iPhone that ...

  2. codeforces Soldier and Number Game(dp+素数筛选)

    D. Soldier and Number Game time limit per test3 seconds memory limit per test256 megabytes inputstan ...

  3. [algorithm] My rookie plan to start

    若干年后,经验有一些,但根基不牢靠.[algorithm] series 借助学习Standard Template Library: Algorithms的这段时期,在自己的算法和c++基础方面加些 ...

  4. Testing - 质量保证与质量控制

    QA QC QM 概念 Quality Assurance (质量保证) Quality Control (质量控制) Quality Manage (质量管理) 定义 为达到质量要求所采取的作业技术 ...

  5. Gephi可视化(二)——Gephi Toolkit叫板Prefuse

    继在园子里写的<Gephi可视化(一)——使用Gephi Toolkit创建Gephi应用>介绍了如何使用Gephi Toolkit工具集进行可视化编程后,本篇对Gephi Toolkit ...

  6. Hadoop阅读笔记(一)——强大的MapReduce

    前言:来园子已经有8个月了,当初入园凭着满腔热血和一脑门子冲动,给自己起了个响亮的旗号“大数据 小世界”,顿时有了种世界都是我的,世界都在我手中的赶脚.可是......时光飞逝,岁月如梭~~~随手一翻 ...

  7. java并发编程(2)--volatile(转)

    转载:http://ifeve.com/volatile/ 作者:方 腾飞 花名清英,并发网(ifeve.com)创始人,畅销书<Java并发编程的艺术>作者,蚂蚁金服技术专家.目前工作于 ...

  8. eclipse中断点调试debug

    几乎没有用过debug模式,每次想要知道结果都是sysou一下.记得曾经问乱码问题,jfinal说打断点调试看在哪里出错.简单记下普通调试. 1.在需要查看的地方打断点,方法是在行号右侧双击. 2.运 ...

  9. 200、301、302、304、404等HTTP状态码

    在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Google无法验证网站几种解决办法,提及到由于 ...

  10. 百度地图与HT for Web结合的GIS网络拓扑应用

    在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...