jQuery中prependTo()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中prependTo()方法用法。分享给大家供大家参考。具体分析如下:

此方法把匹配的元素插入指定元素之前。
prependTo()方法的作用和prepend()方法是相同的,但是在语法上是有差别的,虽然在形式上看起来是一样的。

语法结构:

$(selector).prependTo(content)

参数列表:
参数 描述
selector 要被插入的匹配元素。
content 要被插入匹配元素的元素。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>prependTo()函数-三水点靠木</title>

<style type="text/css">

p

{

  height:100px;

  width:100px;

  border:1px solid blue;

}

div

{

  height:200px;

  width:200px;

  border:1px solid green;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

  $("p").prependTo("div");

})

})

</script>

</head>

<body>

<p>我是p的内容</p>

<div>我是div</div>

<button>点击查看效果</button>

</body>

</html>

注意:运行编辑器之后,再按F5刷新网页即可查看演示。
以上代码在点击按钮之后可以将p元素移动到div内部的前方。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 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
jQuery中andSelf()方法用法实例
Jan 08 #Javascript
jQuery中add()方法用法实例
Jan 08 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
总结js函数相关知识点
2018/02/27 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
理解Python中的With语句
2015/02/02 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
快速了解Python相对导入
2018/01/12 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python__new__内置静态方法使用解析
2020/01/07 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
药学专业大专生的自我评价
2013/12/12 职场文书
表彰大会主持词
2014/03/26 职场文书
任命通知范文
2015/04/21 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫