jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

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之间的区别的更多相关文章

jquery中append跟prepend的用法
jquery中append和prepend的用法 append 是插入到元素中,并放到元素内的最后面prepend 是插入到元素中,并放到元素内的最前面例$("body"). ...
jquery中append、prepend, before和after方法的区别（一）
原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...
jQuery中append()、prepend()与after()、before()的区别
转载未曾见海 https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...
jquery中append()、prepend()、after()、before()的区别详解
append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标签之前添加东西) prepend() - 在被选元素的开头插入内容(内容的开始,比如说有个 ...
jquery中append、prepend, before和after方法的区别
1.prepend() .append()方法在被选元素的开头/结尾插入文本/HTML: 2.before().after()方法在被选元素之前/之后插入内容: append() & prep ...
jQuery中append()与appendto()用法分析
本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...
jq中append()、prepend()、after()、before()的区别
jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...
jQuery中，&dollar;&period;extend，&dollar;obj&period;extend和&dollar;&period;fn&period;extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
Spring中Bean的命名问题及ref和idref之间的区别
一直在用Spring,其实对其了解甚少,刚去了解了一下Spring中Bean的命名问题以及ref和idref之间的区别,略作记录,以备后查. Spring中Bean的命名 1.每个Bean可以有一个i ...

随机推荐

【翻译】MongoDB指南/CRUD操作（二）
[原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(二) 主要内容: 更新文档,删除文档,批量写操作,SQL与MongoDB映射图,读隔离(读关 ...
prism4 StockTrader RI 项目分析一些体会2
prism 对于逻辑复杂的页面,通过建立 controller实现逻辑管理按着一般的做法就是,各模块的viewmodel import由各模块去实例化(理解有限),但是通过controller实现了 ...
帝国cms实现会员注册之后根据所在会员组转向的方法
帝国cms要实现会员注册之后根据所在会员组转向的能能,就需要修改/e/member/class/member_registerfun.php文件找到第175行,修改成如下代码: //审核 if($ch ...
Linux 高级网络编程
设置套接字函数: #include<sys/socket.h> int setsockopt(int sockfd, int level, int optname, const void* ...
Datagrid扩展方法InitEditGrid{支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
php之Cookie与Session详解
Cookie管理 Cookie是在HTTP协议下,通过服务器或脚本语言可以维护客户浏览器上信息的一种方式,Cookie的使用很普遍,许多提供个人化服务的网站都是利用Cookie来区别不同用户,以显示与 ...
ELK日志分析平台系统CentOS7环境搭建和基本使用
一.搭建环境系统环境:CentOS7 安装iptables:https://blog.csdn.net/momo_mutou/article/details/81739155 jdk1.8: ht ...
Linux命令之grep
grep命令用处:文本搜索工具用法:grep + ‘查找关键字的名字’ + 文件名示例: 还在profile里面查找then 干净利落强大,有关then的信息显示
Tinyos学习笔记（一）
简述:发送和接受数据的程序分别烧录到两个节点上,发送方发送流水灯数据,接受方接受数据并实现流水灯 1.发送和接受程序用到的组件及其接口如图(通过make telosb docs获得)所示: 2.发 ...
Postgres 的 Range 类型
mysql 不支持 Range 类型零.介绍 1. 适用场景: a.可以用于实现是否满足薪资需求的功能 b.可以用于实现是否符合上线时间的功能一.定义 1.类型范围 Postgres Se ...