浅谈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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JavaScript多线程详解
Aug 12 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
微信小程序实现底部弹出框
Nov 18 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
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
解析Python中的二进制位运算符
2015/05/13 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
python实现数据图表
2017/07/29 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
C语言编程题
2015/03/09 面试题
初中生操行评语大全
2014/04/24 职场文书
梅花魂教学反思
2014/04/25 职场文书
学校周年庆活动方案
2014/08/22 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
DSP接收机前端设想
2022/04/05 无线电
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS