jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>test</title>

    <script src="jquery.js"></script>

  </head>

  <style>

  p {

    background-color: aquamarine;

  }

  </style>

  <body>

    <p id="n1">

      <span id="n2">span#n2</span>n1

  </p>

  <p id="n3">

      <label id="n4" class="move">label#n4</label>n3

  </p>

  <p id="n5">

      <span id="n6">span#n6</span>n5

  </p>

  <p id="n7">

    <span id="n8">span#n8</span>n7

  </p>

  <p id="n9">

    <span id="n10">span#n10</span>n9

  </p>

  <p id="n11">

    <span id="n12">span#n12</span>n11

  </p>

  </body>

</html>

先新建一个jQuery div对象:

let newdiv = $('<div>new one</div>');

分别使用下列语句看看有什么效果

$('#n1').append(newdiv.clone());

newdiv.clone().insertAfter('#n1');

newdiv.clone().appendTo('#n3');

$('#n5').prepend(newdiv.clone());

$('#n5').insertBefore(newdiv.clone());

newdiv.clone().prependTo('#n7')

$('#n9').before(newdiv.clone());

newdiv.clone().before('#n9');

$('#n11').after(newdiv.clone());

newdiv.clone().after('#n11');

相信经过以上的代码你能够知道一些关系了:

1 To和不带To就是一个相反的关系

2 **pend是在p元素内末尾添加,成为p的last-child insert**是在p元素外添加,成为p的next,或first-sibling

3 A.before(B) = B.insertBefore(A) A.after(B) = B.insertAfter(A)效果上是相等的,但是返回值不一样,如果使用before返回的是A,如果是insert返回的是B

希望以上的总结能对你的理解有所帮助.

jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别的更多相关文章

  1. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  2. jquery中append、prepend, before和after方法的区别（一）

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

  3. jQuery中append()、prepend()与after()、before()的区别

    转载 未曾见海  https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...

  4. jquery中append()、prepend()、after()、before()的区别详解

    append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标签之前添加东西) prepend() - 在被选元素的开头插入内容(内容的开始,比如说有个 ...

  5. jquery中append、prepend, before和after方法的区别

    1.prepend() .append()方法在被选元素的开头/结尾插入文本/HTML: 2.before().after()方法在被选元素之前/之后插入内容: append() & prep ...

  6. jQuery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...

  7. jq中append()、prepend()、after()、before()的区别

    jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...

  8. jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  9. Spring中Bean的命名问题及ref和idref之间的区别

    一直在用Spring,其实对其了解甚少,刚去了解了一下Spring中Bean的命名问题以及ref和idref之间的区别,略作记录,以备后查. Spring中Bean的命名 1.每个Bean可以有一个i ...

随机推荐

  1. mybatis自动生成mapper,dao映射文件

    利用Mybatis-Generator来帮我们自动生成mapper.xml文件,dao文件,model文件. 1.所需文件 关于Mybatis-Generator的下载可以到这个地址:https:// ...

  2. WinForm中ClickOnce发布至广域网

    ClickOnce智能客户端,是微软提供比较早的一项技术,用于实现WinForm开发的应用程序能够自动更新,省去给每台客户端升级带来的困扰. 从网上的贴子里看,有的说好用,有的说不好用.客观的说,微软 ...

  3. Js比较对Object类型进行排序

    <script> var data=[{name:"121",age:"18",year:"2018"},{name:" ...

  4. linux shell 和linux 命令的区别？windows shell 和 windows 命令呢？

    shell翻译成壳的意思,它是包裹在linux内核外层的,一个可通过一系列的linux命令对操作系统发出相关指令的人机界面. shell可以通过其条件语句和循环语句等,把一系列linux命令结合在一起 ...

  5. 如何使用 VS2015 进行远程调试？

    VisualStudio\Microsoft Visual Studio 14.0\Common7\IDE\Remote Debugger 直接复制 Remote Debugger 文件,里面包含了 ...

  6. 2017第八届蓝桥杯 K倍区间

    标题: k倍区间 给定一个长度为N的数列,A1, A2, - AN,如果其中一段连续的子序列Ai, Ai+1, - Aj(i <= j)之和是K的倍数,我们就称这个区间[i, j]是K倍区间. ...

  7. asp.net动态网站repeater控件使用及分页操作介绍

    asp.net动态网站repeater控件使用及分页操作介绍 1.简单介绍 Repeater 控件是一个容器控件,可用于从网页的任何可用数据中创建自定义列表.Repeater 控件没有自己内置的呈现功 ...

  8. SpringMVC的标签库

            Spring2.0版本开始后,提供了一组功能强大的标签用来在JSP和SpringWebMVC中处理表单元素 ,可以用来访问控制器处理命令对象和绑定数据:         以下是表单标签 ...

  9. sqlserver中select造成死锁

    死锁过程: select语句使用非聚族索引查询产量信息,会对非聚族索引添加共享锁,由于非聚族索引上没有select的全部数据列,(所以会有书签查找出现,)需要查询产量表.查询产量表时,需要对产量表数据 ...

  10. 【dedecms】DEDE列表页调用文章内容第一张图片(非缩略图)方法

    打开 ../ include/ common.func.php 添加代码 //将缩放图转变为文章第一张图片 function firstimg($str_pic) { $str_sub=substr( ...