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 相关文章推荐
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
深入解析ES6中的promise
Nov 08 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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 GD库生成图像的几个函数总结
2014/11/19 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python实现textrank关键词提取
2018/06/22 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Django forms组件的使用教程
2018/10/08 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
利用nohup来开启python文件的方法
2019/01/14 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python变量访问权限控制详解
2019/06/29 Python
python中setuptools的作用是什么
2020/06/19 Python
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
初一生物教学反思
2014/01/18 职场文书
优秀党员获奖感言
2014/02/18 职场文书
企业安全生产责任书
2014/04/14 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
自查自纠整改报告
2014/11/06 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
React四级菜单的实现
2022/04/08 Javascript