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. C++编译常见错误

    error C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead. To di ...

  2. 【JBPM4】EL表达式的使用,实现JAVA与JPDL的交互

    user.java实体类 private String kezhang; private String zhuren; /...完善set get 方法.../ 创建流程实例 //创建流程引擎 Pro ...

  3. echarts官网上的动态加载数据bug被我解决。咳咳/。

    又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...

  4. Java String lastIndexOf() 方法

    Java String lastIndexOf() 方法 测试代码 public class Test { public static void main(String[] args) { // -- ...

  5. 多线程下,Python Sqlite3报[SQLite objects created in a thread can only be used...]问题

    明明加了锁保护,还是出了下面的问题 ProgrammingError: SQLite objects created in a thread can only be used in that same ...

  6. python url配置单独放在某个应用目录中

    文件目录: 将 urls.py 文件复制blog目录下: 此时,blog文件夹下多了urls.py文件 现在对比,两个urls.py文件: 分离前:(只有website里有urls.py) from ...

  7. 洛谷P2587 [ZJOI2008] 泡泡堂

    题目传送门 分析:一道策略游戏题,要求最大期望得分和最小期望得分.首先分析最大,很显然是可以用一种类似于田忌赛马的思维来做,将两队的实力按照从大到小(其实从小到大也可以)排序,然后就按照顺序比较,可能 ...

  8. Spring Security静态资源访问

    在使用Spring Security时要求所有请求都需要授权访问,此时会定义过滤规则如下 protected void configure(HttpSecurity http) throws Exce ...

  9. CDH-hive支持insert、update、delete操作

    开发要求hive支持update操作,搞张临时表测试下,报错如下: 配置hive-site.xml CDH进入hive配置页,选择高级,找到hive-site.xml的HIve客户端高级配置段代码段, ...

  10. oracle return code 2112

    SQL-02112 SELECT..INTO returns too many rows Cause: A SELECT...INTO statement returned more rows tha ...