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 相关文章推荐
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JavaScript中return false的用法
Mar 12 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
js 异步处理进度条
2010/04/01 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python使用OpenCV进行标定
2018/05/08 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python做接口测试的必要性
2019/11/20 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
医学生职业生涯规划书范文
2014/03/13 职场文书
校庆标语集锦
2014/06/25 职场文书
神农溪导游词
2015/02/11 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android