浅谈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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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随机数生成代码与使用实例分析
2011/04/08 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python argparse模块使用方法解析
2020/02/20 Python
python openCV自制绘画板
2020/10/27 Python
python中的时区问题
2021/01/14 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python