浅谈jQuery before和insertBefore的区别


Posted in Javascript onDecember 04, 2016

jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容,写法上有区别

先看一个例子:

在<div class='div1'>div1</div>前面插入<div>toInsertContent</div>

实现:

$('<div>toInsertContent</div>').insertBefore($('.div1'));

或者

$('.div1').before('<div>toInsertContent</div>');

结果:

<div>toInsertContent</div>
<div class='div1'>div1</div>

错误写法:

$('<div>toInsertContent</div>').before($('.div1'));

结果:

不但不会在div1前面插入元素,反而会把div1删除

总结:

before前面是在哪个元素前面插入,后面是插入的内容元素

insertBefore前面是插入的内容元素 ,后面是在哪个元素前面插入

不能写反了。

以上这篇浅谈jQuery before和insertBefore的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可选择和输入的下拉列表框示例
Nov 05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 #Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 #Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 #Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 #Javascript
JavaScript 中对象的深拷贝
Dec 04 #Javascript
详解JavaScript模块化开发
Dec 04 #Javascript
javascript 定时器工作原理分析
Dec 03 #Javascript
You might like
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
原生js实现随机点名
2020/07/05 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
python列表去重的二种方法
2014/02/14 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
公司开业庆典主持词
2014/03/21 职场文书
活动总结新闻稿
2014/08/30 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
改进工作作风心得体会
2016/01/23 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android