浅谈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 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Django实现发送邮件功能
2019/07/18 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python实现126邮箱发送邮件
2020/05/20 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
2015年中秋放假通知范文
2015/08/18 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js