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()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...
随机推荐
- Emacs教程
中文 http://www.cnblogs.com/robertzml/category/209299.html 英文 http://ergoemacs.org/emacs/emacs_fun.htm ...
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- poj3070 Fibonacci
Description In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. F ...
- hadoop之根据Rowkey从HBase中查询数据
1.Hbase 根据rowkey 查询 conf的配置信息如下: conf = new Configuration(); conf.set("hbase.zookeeper.quorum&q ...
- Hadoop 之Hbase命令
一.常用命令:(hbase shell 进入终端) 1.创建表: create 'users','user_id','address','info' 表users,有三个列族user_id,addre ...
- iOS并发编程指南之同步
1.gcd fmdb使用了gcd,它是通过 建立系列化的G-C-D队列 从多线程同时调用调用方法,GCD也会按它接收的块的顺序来执行. fmdb使用的是dispatch_sync,多线程调用a ser ...
- Android 软键盘盖住输入框的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- Jrebel是一套开发环境，用来实现热部署
http://truemylife.iteye.com/blog/1140921 背景与愿景:开发环境下,tomcat对热布署的支持还不够全面,致使开发人员浪费大量时间在重起服务上.为了提高开发效率, ...
- jquery常用
获取元素宽度 .innerWidth() // 包含padding .outerWidth() // 包含padding, border .outerWidth(true)//包含padding, b ...
- am等adb命令小总结
本文的am部分参考了:http://www.cnblogs.com/dyllove98/archive/2013/07/08/3178094.html 的博客 今天研究adb的时候发现在pc端也可以启 ...