浅谈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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
js判断日期时间有效性的方法
2015/10/24 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
实例讲解JS中pop使用方法
2019/01/27 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
什么是java序列化,如何实现java序列化
2012/11/14 面试题
数控专业推荐信范文
2013/12/02 职场文书
销售行政专员职责
2014/01/03 职场文书
争论的故事教学反思
2014/02/06 职场文书
自我鉴定总结
2014/03/24 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
教师节感想
2015/08/11 职场文书
MySQL开启事务的方式
2021/06/26 MySQL