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 相关文章推荐
javascript语言结构小记(一)
Sep 10 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
js判断节假日实例代码
Dec 27 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
vue分页插件的使用方法
Dec 25 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python和Go语言的区别总结
2019/02/20 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
python字典的值可以修改吗
2020/06/29 Python
python 如何快速复制序列
2020/09/07 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
乡镇八一建军节活动方案
2014/08/24 职场文书
银行求职信模板
2015/03/20 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏