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()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...
随机推荐
- WCF binding的那些事！！！
原文地址:http://www.cnblogs.com/Anima0My/archive/2008/04/16/1156146.html WCF中常用的binding方式: BasicHttpBind ...
- 解决英文或数字在HTMl网页中不自动换行。
对于网页设计的新手而言,在接触一段时间的HTML/CSS后,一定会遇到这样的问题:对于已经定义了宽度的容器(如DIV,TD,段落等)如果里面出现了较长的英文或数字,则内容不能自动换行然后会将框架撑出设 ...
- AlwaysOn可用组基础知识
AlwaysOn可用组概念 AlwaysOn作为SQL Server2012新功能,其目的主要为了替代镜像功能. AlwaysOn拥有镜像的同步和异地容灾功能,并能在镜像的基础上实现一对多的镜像副本同 ...
- PHP的扩展类 mysqli_stmt：预处理类
mysqli和mysqli_result能完成的功能 都可以使用mysqli_stmt类开完成 1.编译一次,使用多次,类似于存储过程 2.参数化查询,可防止sql注入 1: <?php 2: ...
- Ruby类的继承
Ruby继承的语法 class DerivedClass < BaseClass #some stuff end < 为继承符号 重写(override) 的概念 有时, 我们希望子类从父 ...
- 【C语言入门教程】7.3 结构体指针的定义和引用
C 语言中指针的操作非常灵活,它也能指向结构体变量对结构体变量进行操作.在学习结构指针之前,需要再次加深对指针的认识.声明指针变量时所使用的数据类型修饰符实际上的作用是定义指针访问内存的范围,如果指针 ...
- Unix操作系统中UUCP知识详细讲解
导读 Unix操作系统有很多值得学习的地方,这里我们主要介绍Unix操作系统中的uucp,大家一起来学习下吧!UUCP系统是一组程序,完成文件传输,执行系统之间的命令,维护系统使用情况的统计,保护安全 ...
- Unity路径规划
Unity路径规划 转自:http://www.cnblogs.com/zsb517/p/4090629.html 背景 酷跑游戏中涉及到弯道.不规则道路. 找来一些酷跑游戏的案例来看,很多都是只有 ...
- ionic的页面直接的跳转
$state.go页面不刷新数据 假如进入market/beian/add添加数据,保存提交后回退market/beian列表页,没有自动更新数据,必须得手动下拉刷新才会出来 $state.go(&q ...
- 问题: Oracle Database 10g 未在当前操作系统中经过认证
问题: Oracle Database 10g 未在当前操作系统中经过认证 在Windows 7中安装Oracle 10g. 使用的Orcale版本是10g. 步骤1: 在Orcale官网上下载,下载 ...