浅谈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获取后台Cookies值的小例子
Mar 04 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue实现文字加密功能
Sep 27 Javascript
Postman环境变量全局变量使用方法详解
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多文件上传功能实现原理及代码
2013/04/18 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python pymysql库的常用操作
2020/10/16 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
党员学习十八大感想
2014/01/17 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
贷款担保申请书
2014/05/20 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
感谢师恩主题班会
2015/08/17 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
实操Python爬取觅知网素材图片示例
2021/11/27 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS