浅谈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 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
js微信分享API
Oct 11 Javascript
拖动时防止选中
Feb 03 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
清除div下面的所有标签的方法
2014/02/17 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
女大学生个人求职信
2013/12/09 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
追悼会子女答谢词
2014/01/28 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
十佳家长事迹材料
2014/08/26 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
认识实习感想
2015/08/10 职场文书