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函数是一样，只不过它们的写法是反着来写的而已

备注：before函数与after函数相反，表示是元素的前面加入指定元素

after、append和appendTo三个函数的区别的更多相关文章

  1. jquery after append appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...

  2. jquery：after append appendTo三个函数的区别

    1.查找元素节点      var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);    2.查找元素属性 利用jq ...

  3. jq查找父类元素三个函数的区别

    parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...

  4. array_map、array_walk、array_filter三个函数的区别

    array_walk --- 使自定的函数能处理数组的每个元素 bool array_walk ( array &array, callback funcname [, mixed userd ...

  5. TransparentBlt、StretchBlt与BitBlt三个函数的区别

    jackyhwei 发布于 2011-10-13 10:55 点击:1080次  来自:blog.csdn.net/weiqubo BOOL StretchBlt( int x, //指定目的矩形区域 ...

  6. 【iOS开发之C语言】sprintf,strncpy,strcmp三个函数的区别

    strncpy 这个函数用于将源字符串的内容拷贝到目标字符串,会覆盖掉目标字符串的之前内容 ] = "love"; char str2[] = "cool"; ...

  7. Javascript Math ceil()、floor()、round()三个函数的区别

    Round是四舍五入的...Ceiling是向上取整..float是向下取整. ceil():将小数部分一律向整数部分进位. 如: Math.ceil(12.2)//返回13 Math.ceil(12 ...

  8. Oracle中NVL、NVL2、NULLIF 三个函数的区别?

    首先说明:NULL指的是空值,或者非法值. 1.NVL (expr1, expr2)expr1为NULL,返回expr2:不为NULL,返回expr1.注意两者的类型要一致 2.NVL2 (expr1 ...

  9. 【笔记】jquery append，appendTo，prepend，prependTo 介绍

    在jquery权威指南里面学习到这一章,很有必要介绍一下里面的内容: 首先是append(content)这个函数: 意思是将内容content加入到所选择的对象内容的后面 例如:$("di ...

随机推荐

  1. CocoaPods第三方类库依赖管理

    安装cocoapods   1.移除ruby的源地址 gem sources --remove https://rubygems.org/   2.添加ruby的源地址 gem sources -a ...

  2. LeetCode解题报告—— Jump Game & Merge Intervals & Permutation Sequence

    1. Jump Game Given an array of non-negative integers, you are initially positioned at the first inde ...

  3. Java学习笔记（十三）——通过Netbeans开发环境生成oracle数据库中表的对应hibernate映射文件

    [前面的话] 身体慢慢已经快好了,感觉真好,哈哈. 这篇文章要通过Hibernate对数据库进行操作,而Netbeans可以直接通过数据库逆向生成对应的映射文件.基础文章,选择性阅读. [步骤] 1. ...

  4. 搭建openstack系统初始化(2)

    操作系统环境 :Centos 7.3 x64 1).安装需要的包 yum install wget vim chrony net-tools bash-completion -y 2)配置阿里elpl ...

  5. 从零开始做SSH项目（一）

    1.数据库脚本 用户表 CREATE TABLE `ybl`.`userinfo`( `id` INT NOT NULL AUTO_INCREMENT, `email` ) NOT NULL, `id ...

  6. CodeForces 738E Subordinates

    排序,构造. 相当于告诉我们一棵树$n$个节点,每个节点在哪一层,至少需要移动多少个节点,才能让这些节点变成一棵树. 按照层次排个序移动一下就可以了,优先选择那些不是$s$但是层次是$0$的节点,如果 ...

  7. SpringBoot整合SpringSecurity简单实现登入登出从零搭建

    技术栈 : SpringBoot + SpringSecurity + jpa + freemark ,完整项目地址 : https://github.com/EalenXie/spring-secu ...

  8. Loj#6432「PKUSC2018」真实排名（二分查找+组合数）

    题面 Loj 题解 普通的暴力是直接枚举改或者不改,最后在判断最后对哪些点有贡献. 而这种方法是很难优化的.所以考虑在排序之后线性处理.首先先假设没有重复的元素 struct Node { int p ...

  9. [Arc080F]Prime Flip

    [Arc080F]Prime Flip Description 你有无限多的"给给全",编号为1,2,3,....开始时,第x1,x2,...,xN个"给给全" ...

  10. 【线段树】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem J. Jedi Training

    题意:给你一个序列,支持两种操作:单点修改:询问一个区间中所有相邻位置下标奇偶性均不同的子序列中,和最大的是多少. 线段树每个结点维护四个值: 以奇数下标开始到奇数下标结束的最大子序列和: 以偶数下标 ...