浅谈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实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
继续学习javascript闭包
Dec 03 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
CocosCreator入门教程之网络通信
Apr 16 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
json简单介绍
2008/06/10 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python机器学习之神经网络(二)
2017/12/20 Python
python框架中flask知识点总结
2018/08/17 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Python调用Windows命令打印文件
2020/02/07 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
Python 中Operator模块的使用
2021/01/30 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
什么是岗位职责
2013/11/12 职场文书
工程师岗位职责规定
2014/02/26 职场文书
城南旧事读书笔记
2015/06/29 职场文书
《西门豹》教学反思
2016/02/23 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS