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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python判断有效的数独算法示例
2019/02/23 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python实现AdaBoost算法的示例
2020/10/03 Python
个人找工作自荐信格式
2013/09/21 职场文书
事业单位辞职信范文
2014/01/19 职场文书
日化店促销方案
2014/03/26 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
党员创先争优心得体会
2014/09/11 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
初一军训感言
2015/08/01 职场文书
《法国号》教学反思
2016/02/22 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记