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的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python实现维吉尼亚算法
2019/03/20 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
经济管理专业自荐信
2013/12/30 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
安全教育感言
2014/03/04 职场文书
自我鉴定标准格式
2014/03/19 职场文书
工作鉴定评语
2014/05/04 职场文书
2014年档案室工作总结
2014/12/01 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2016党员入党决心书
2015/09/22 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书