jQuery中insertBefore()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中insertBefore()方法用法。分享给大家供大家参考。具体分析如下:

此方法把匹配的元素插入到另一个指定的元素集合的前面。
insertBefore()方法与insertAfter()相反。

语法结构:

$(selector).insertBefore(content)

参数列表:
参数 描述
selector 定义要被插入的内容。
content 定义在哪些元素之前插入内容。

实例代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>insertBefore()函数-三水点靠木</title> 

<style type="text/css">  

p{  

  width:100px;  

  height:100px;  

  background-color:red;

}  

div{  

  width:200px;  

  height:200px;  

  background-color:blue;

}  

</style>  

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("#bt").click(function(){  

    $("div").insertBefore("p");  

  })  

});  

</script>  

</head>  

<body>  

<p></p>  

<div></div>  

<input type="button" value="点击查看效果" id="bt" />

</body>  

</html>

以上代码可以将div元素插入到p元素的前面。
需要特别注意的是,这里的插入是将匹配元素挪动到指定元素的前面,而不是复制一个新的。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
8个超实用的jQuery功能代码分享
Jan 08 #Javascript
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
jQuery中contents()方法用法实例
Jan 08 #Javascript
You might like
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
Python栈算法的实现与简单应用示例
2017/11/01 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
自我鉴定范文200字
2013/10/02 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
企业授权委托书范本
2014/09/22 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2014年村委会工作总结
2014/11/24 职场文书
农业项目投资意向书
2015/05/09 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书