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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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 和 MYSQL
2006/10/09 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP attributes()函数讲解
2019/02/03 PHP
javascript事件模型代码
2007/07/01 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python编程中的异常处理教程
2015/08/21 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
卫校中专生的自我评价
2014/01/15 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
竞选班委演讲稿
2014/04/28 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
本科毕业生自荐信
2014/06/02 职场文书
房屋质量投诉书
2015/07/02 职场文书
企业愿景口号
2015/12/25 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android