浅谈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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
微信小程序自定义模态弹窗组件详解
Dec 24 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
动态控制Table的js代码
2007/03/07 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
Angular的$http与$location
2016/12/26 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python 用下标截取字符串的实例
2018/12/25 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python生成器generator原理及用法解析
2020/07/20 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
C++面试题目
2013/06/25 面试题
英语商务邀请函范文
2014/01/16 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
应聘教师求职信
2014/07/19 职场文书
毕业实习感受与体会
2015/05/26 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
Nginx限流和黑名单配置
2022/05/20 Servers