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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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+js实现点赞功能的示例详解
2020/08/07 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue.js input框之间赋值方法
2018/08/24 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python解析最简单的验证码
2016/01/07 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python web框架 django wsgi原理解析
2019/08/20 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
绘画专业自荐信范文
2014/02/23 职场文书
公休请假条
2014/04/11 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Go并发4种方法简明讲解
2022/04/06 Golang