jQuery中append、insertBefore、after与insertAfter方法注意事项

这里列的是针对初学jQuery者来说容易搞不懂的部分，我在这里把这些方法列了个清单，希望大家能看的懂。如下：


























方法

源包装集/字串

目标包装集体

特性描述

A.append(B)

B

A

若目标包装集只匹配一个元素，则源(也包括同源包装集匹配的所有元素)将被移动到目标位置；若目标包装集包含多个元素，则源将保留在原来的位置，但同时复制一份相同的副本到目标位置。

由此，若目标只匹配一个元素时，使用前述方法后源将被删除。

B.appendTo(A)

A.prepend(B)

B.prependTo(A)

A.before(B)

B.insertBefore(A)

A.after(B)

B.insertAfter(A)

举例说明：在上图中，A.append(B)表示把B添加到与A匹配的所有元素的现有内容后面，因此B是源，A是目标包装集。

赞 (0)

相关推荐

  • 浅谈jQuery before和insertBefore的区别

    jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容,写法上有区别 先看一个例子: 在<div class='div1'>div1</div>前面插入<div>toInsertContent</div> 实现: $('<div>toInsertContent</div>').insertBefore($('.div1')); 或者 $('.div1').before('<div>toI

  • jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

  • jQuery中insertBefore()方法用法实例

    本文实例讲述了jQuery中insertBefore()方法用法.分享给大家供大家参考.具体分析如下: 此方法把匹配的元素插入到另一个指定的元素集合的前面. insertBefore()方法与insertAfter()相反. 语法结构: 复制代码 代码如下: $(selector).insertBefore(content) 参数列表: 参数 描述 selector 定义要被插入的内容. content 定义在哪些元素之前插入内容. 实例代码: 复制代码 代码如下: <!DOCTYPE html

  • jQuery中append()方法用法实例

    本文实例讲述了jQuery中append()方法用法.分享给大家供大家参考.具体分析如下: 此方法在匹配元素的结尾插入指定内容. 元素被插入的位置是匹配元素的内部,而after()方法元素被插入的位置是匹配元素的外部. append()方法的作用和appendTo()方法是相同的,但是语法是不同的,尽管语法形式一样. 语法结构: 复制代码 代码如下: $(selector).append(content) 参数列表: 参数 描述 content 指定被插入的内容,content的可能的值: 1.

  • jQuery中setTimeout的几种使用方法小结

    我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数: 复制代码 代码如下: <div id="div_debug"></div> <script src="http://www.studyday.net/demo/jquery.js"></script>  <script language="JavaScript">  funct

  • jQuery中ajax的load()与post()方法实例详解

    本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定

  • jquery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同,但是两者也有区别. 1.append()方法:在被选元素的结尾(但仍在元素内部)插入指定的内容. a.语法: 复制代码 代码如下: $(selector).append(content); 其中,参数content是必需的,指定要附加的内容. b.append能够使用函数给被选元素附加内容,语法为

  • jQuery中的deferred对象和extend方法详解

    1 deferred对象 deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能 deferred对象的方法 (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变:接受参数时,作用为在参数对

  • jquery中的常见问题及快速解决方法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click(function(){ $.ajax({ do something }); return false; }) 2 去除选中元素的某一个属性使用removeattr 3 javascript中与时间相关的函数有setInterval("function",millisec[,"la

  • jquery中object对象循环遍历的方法

    一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下! 案例 我们看如下对象: var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99 } 假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这

  • jQuery中each遍历的三种方法实例分析

    jQuery中each遍历的三种方法实例分析

    本文实例讲述了jQuery中each遍历的三种方法.分享给大家供大家参考,具体如下: 1.选择器+遍历 $('div').each(function (i){ //i就是索引值 //this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,domEle){ //index就是索引值 //domEle 表示获取遍历每一个dom对象 }); 3.更适用的遍历方法 1)先获取某个集合对象 2)遍历集合对象的每一个元素 var d=$(

  • jQuery中animate的几种用法与注意事项

    jQuery中animate的几种用法与注意事项

    一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

随机推荐