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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
AngularJS语法详解
Jan 23 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
react 创建单例组件的方法
Apr 26 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 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
PHP 中dirname(_file_)讲解
2007/03/18 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python中enumerate函数代码解析
2017/10/31 Python
flask中的wtforms使用方法
2018/07/21 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python flask框架端口失效解决方案
2020/06/04 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
个人简历的自荐信
2013/10/23 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
建筑节能汇报材料
2014/08/22 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python