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 MD4
Dec 20 Javascript
js option删除代码集合
Nov 12 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
python zip文件 压缩
2008/12/24 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python Django批量导入数据
2016/03/25 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
Shell编程面试题
2016/05/29 面试题
《晚上的太阳》教学反思
2014/04/23 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
个人委托书范文
2015/01/28 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
Javascript 解构赋值详情
2021/11/17 Javascript
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript