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语言中的Literal Syntax特性分析
Mar 08 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
教你部署vue项目到docker
Apr 05 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
window.showModalDialog使用手册
2007/01/11 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python字典一键多值实例代码分享
2019/06/14 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
100%羊绒:NakedCashmere
2020/08/26 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
节电标语大全
2014/06/23 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript