浅谈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 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 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中如何判断AJAX提交的数据
2012/02/05 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
强制设为首页代码
2006/06/19 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
Javascript事件实例详解
2013/11/06 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
Django中Model的使用方法教程
2018/03/07 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
一道Delphi上机题
2012/06/04 面试题
农村婚礼证婚词
2014/01/10 职场文书
反腐倡廉标语
2014/06/24 职场文书
导航工程专业自荐信
2014/09/02 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书