jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项


Posted in Javascript onApril 04, 2020

JQuery中after、append、insertAfter、prepend的简单用法

简单代码:

<html>
<head>
<title>after、append、insertAfter用法—三水点靠木</title>
</head>
<body>
<div>
<p>段落1</p>
</div>
</body>
</html>

下面的内容我们一般都是在chrome浏览器中测试这样比较容易看到效果

测试代码

<!DOCTYPE html>
<html>
<head>
<title>after、append、insertAfter用法</title>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<p>段落1</p>
</div>
</body>
</html>

1、after:在选定元素之后插入指定的内容,该内容可以包含HTML标签。

使用after方法向div之后插入代码:

$("div").after("<p>段落2</p>");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

偷偷的告诉你三水点靠木的技术测试代码都是用的这个方法,简单而直观。

由此可知:使用after方法追加内容,是在选定的元素外部追加,也就是跳出选定元素在选定元素之后追加。

2、append:在选定元素的结尾插入指定内容,该内容也可以包含HTML标签。

使用append方法向div之后插入代码:

$("div").append("<p>段落2</p>");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

因此:使用append方法追加内容,是在选定元素的内部追加,没有跳出选定元素,直接在选定元素的尾部追加内容。

3、insertAfter:在被选元素之后插入指定内容或已有元素,该内容可以是HTML标签,也可以是选择器表达式

HTML标签:

使用insertAfter方法向div之后插入代码:

$("<p>段落2</p>").insertAfter("div");

运行之后的结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

它的结构跟after的结构相同,也是在选定的元素外部追加内容,跳出选定元素之后追加。

4、选择器表达式:这种情况是在页面中存在要插入的元素。

简答的代码结构:

<div> 
 <h1>这是一个标题1</h1> 
 <h1>这是一个标题2</h1> 
 <h1>这是一个标题3</h1> 
</div> 
<p>这是一个段落。</p> 
<p>这是另一个段落。</p>

使用insertAfter方法向<div>之后插入代码:

$("h1").insertAfter("div");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

下面脚本.之家小编来给大家对比一下

代码执行之前

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

代码执行以后

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

有没有发现div的闭合跑到最上面了,然后

再使用insertAfter方法向<p>之后插入代码:

$("h1").insertAfter("p");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

由上面的两个例子可以看出:使用insertAfter方法插入已有元素,已有元素会被从当前位置移走,然后被添加到选定的元素之后。有点类似于:先复制一份已有元素,然后在页面上删除已有元素,再在每一个选定元素之后粘贴一份复制的已有元素。

所有基于这个原理,我们看一下基于jquery的文章中所有图片width大小的代码

$('#content').find('img').each(function(){
 var img = this;
 if (img.width > 600) {
  img.style.width = "600px";
  img.style.height = "auto";
  //$(img).removeAttr('height');
  var aTag = document.createElement('a');
  aTag.href = img.src;
			aTag.target="_blank";
  $(aTag).addClass('bPic')
  .insertAfter(img).append(img)
  .lightBox(options);
 }
 });

是不是感觉很酷呢

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

就是为较大的图片加上一个a链接,在新窗口打开。这样主要是方便用户查看较大的图片。

5、prepend:在选定元素的开头插入指定内容,该内容可以包含HTML标签。

使用prepend方法向<div>之后插入代码:

$("div").prepend("<p>段落2</p>");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

其结构跟append的结构相同,也是直接在选定元素的内部追加,不需要跳出选定元素,不同的是append是在选定元素的尾部追加,prepend是在选定元素的开头追加。

这里列的是针对初学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是目标包装集。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
js实现百度搜索提示框
Feb 05 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 #Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 #Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 #Javascript
extjs之去除s.gif的影响
Dec 25 #Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 #Javascript
javascript与webservice的通信实现代码
Dec 25 #Javascript
基于node.js的快速开发透明代理
Dec 25 #Javascript
You might like
php类常量的使用详解
2013/06/08 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
在django view中给form传入参数的例子
2019/07/19 Python
python能开发游戏吗
2020/06/11 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
一道SQL面试题
2012/12/31 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
材料采购员岗位职责
2013/12/17 职场文书
动员大会主持词
2014/03/20 职场文书
出差报告怎么写
2014/11/06 职场文书
文明单位创建材料
2014/12/24 职场文书
初中班长竞选稿
2015/11/20 职场文书
Golang解析JSON对象
2022/04/30 Golang
使用scrapy实现增量式爬取方式
2022/06/21 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers