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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
js实现日期级联效果
Jan 23 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Vue.js学习示例分享
Feb 05 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
js调用网络摄像头的方法
Dec 05 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将数据库导出成excel的方法
2010/05/07 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
空中乘务员岗位职责
2014/03/08 职场文书
如何写自我鉴定
2014/03/19 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
电力培训心得体会
2014/09/02 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Golang bufio详细讲解
2022/04/21 Golang