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中,$.extend,$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- Spring中Bean的命名问题及ref和idref之间的区别
一直在用Spring,其实对其了解甚少,刚去了解了一下Spring中Bean的命名问题以及ref和idref之间的区别,略作记录,以备后查. Spring中Bean的命名 1.每个Bean可以有一个i ...
随机推荐
- 【NOIP2012】 疫情控制
[NOIP2012] 疫情控制 标签: 倍增 贪心 二分答案 NOIP Description H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树, 1 号城市是首都, 也是 ...
- [记录]Shell中的getopts和getopt用法
Shell中的getopts和getopt用法 1.getopts getopts(shell内置命令)不能直接处理长的选项(如:--prefix=/home等),getopts有两个参数,第一个参数 ...
- EntityFramework Core 2.0自定义标量函数两种方式
前言 上一节我们讲完原始查询如何防止SQL注入问题同时并提供了几种方式.本节我们继续来讲讲EF Core 2.0中的新特性自定义标量函数. 自定义标量函数两种方式 在EF Core 2.0中我们可以将 ...
- Yii2中JSONP跨域问题的解决
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域(网站)访问数据需 ...
- Flask從入門到入土(四)——登錄實現
表單介紹 1.表單標籤 聲明表單的範圍,位於表單標籤中的元素將被提交 語法: <form> </form> 屬性: Method(提交方式get,post) , Enctyp ...
- 计蒜客 无脑博士 bfs
题目链接无脑博士的试管们 思路:直接模拟倒水过程即可,但是需要记忆判断当前的情况是否已经处理过.dfs和bfs都ok AC代码 #include <cstdio> #include < ...
- c# 委托(Func、Action)
以前自己写委托都用 delegate, 最近看组里的大佬们都用 Func , 以及 Action 来实现, 代码简洁了不少, 但是看得我晕晕乎乎. 花点时间研究一下,记录一下,以便后期的查阅. 1.F ...
- Linux的软链接和硬链接
1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...
- 网络基础tcp/ip协议五
传输层的作用: ip层提供点到点的链接. 传输层提供端到端的链接. 传输层的协议: TCP: 传输控制协议可靠的,面向链接的协议,传输效率低. UDP: 用户数据报协议,不可靠,无连接的服务,传输效率 ...
- ImportError: No module named 'xlrd' 解决办法
import pandas as pd data = pd.read_excel('工作簿1.xls',sheetname='Sheet1') 用pandas读取Excel文件时,会提示 Import ...