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中的Split使用方法与技巧
Mar 09 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
javascript 三种编解码方式
Feb 01 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
简单了解three.js 着色器材质
Aug 03 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数据类型的总结分析
2013/06/13 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP 文件上传限制问题
2019/09/01 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python实现操作文件(文件夹)
2019/10/31 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
英语专业毕业生自荐信
2013/10/28 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
防灾减灾标语
2014/10/07 职场文书
健康教育主题班会
2015/08/14 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android