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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
javascript 函数使用说明
Apr 07 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue实现跨域的方法分析
May 21 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
Vue程序调试的方法
Jun 17 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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实现的支持断点续传的文件下载类
2014/09/23 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP实现简单的计算器
2020/08/28 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
深入理解vue中的$set
2017/06/01 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
Python通过future处理并发问题
2017/10/17 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
python em算法的实现
2020/10/03 Python
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
初一英语教学反思
2014/01/11 职场文书
党员党性分析材料
2014/02/17 职场文书
安全生产演讲稿
2014/05/09 职场文书
暑期教师培训方案
2014/06/07 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
工作推荐信模板
2015/03/25 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js