jquery after append appendTo三个函数的区别
jq文档的说明是
1、after函数
定义和用法：
after() 方法在被选元素后插入指定的内容。
语法：
$(selector).after(content)
实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("button").click(function(){
$("span").after("<a href="#">ddddd</a>")
})
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下：
<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>
span标签后面多了一个a标签
2、append函数
定义和用法：
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
语法：
$(selector).append(content)
实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("button").click(function(){
$("span").append("<a href="#">ddddd</a>")
})
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下：
<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签
3、appendTo函数
定义和用法：
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
语法：
$(content).appendTo(selector)实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("button").click(function(){
// $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的
$("<a href="#">ddddd</a>").appendTo("span")
})
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下：
<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签
效果和append函数是一样，只不过它们的写法是反着来写的而已
jquery after append appendTo三个函数的区别的更多相关文章
- jquery：after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- after、append和appendTo三个函数的区别
jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html>&l ...
- 前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- jQuery height()、innerHeight()、outerHeight()函数的区别详解
参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...
- jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...
- jquery源码分析(三)——工具函数
jQuery.extend({ expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "&quo ...
- jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- （转）jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- jq查找父类元素三个函数的区别
parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...
随机推荐
- [整理]Android开发（二）-Weather App
private class WeatherData{ private String _weatherDescription; private Integer _currentTemperature; ...
- Tomcat6.0 管理器配置
最近忙着毕业答辩,填写材料,好多事情都给耽搁了!一个月都没有继续翻译tomcat,这回有点时间赶紧补上. 这部分,其实对开发者或者tomcat管理者来说,只要会登录页面管理器或者使用写简单的http就 ...
- 绿书模拟day10 单词前缀
[题目描述]一组单词是安全的,当且仅当不存在一个单词是另一个单词的前缀,这样才能保证数据不容易被误解,现在你手上有一个单词集合s,你需要计算有多少个自己是安全的.注意空集永远是安全的.[输入格式]第一 ...
- ASP.NET 生成报表的几中方案
1. 用html 表格绘制报表,javascript导出EXCEL 2. 采用datagrid绑定报表数据,用后台方法导出 //Response.AppendHeader("Content- ...
- jQuery的$.ajax示例
$.ajax({ url: 'index.php?module=products&submod=product_experience_manage&method=ajaxGetSele ...
- sql 2005,2008开启bcp的方法嗯哈步骤
sqlserver 2008开启bcp服务的方法和步骤 sqlserver 2005开启bcp服务的方法和步骤 在开始菜单中找到sql server 2005 -->> 配置工具 --&g ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- excle心得及部分应用案例
目前数据分析方面的知识还学的不多,以后会持续向一些大牛学习,不断的学会做笔记,这样既加深了理解,也能够和大家分享交流.今天就只是把一些excle中常用的知识点总结啦~作为我博客的第一篇吧,希望自己能够 ...
- Mac OS X 11以上系统的Rootless机制问题
由于项目紧,系统一直停留在10版本,最近清闲之后,第一件事就是升级了系统,到11El Capitan版本. 本来想着随便升级了,可能有好玩的东东,结果好玩的木有看见,项目开发环境崩溃了,何其衰耶? 废 ...
- jQuery插件之simplemodal
1.simplemodal在内部定义了如下css类 simplemodal-overlay:遮罩 simplemodal-container:弹出窗口容器 simplemodal-wrap simpl ...