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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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数字格式化
2006/12/06 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python使用matplotlib绘制热图
2018/11/07 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
秋天的图画教学反思
2014/05/01 职场文书
中队活动总结
2014/08/27 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
交通事故被告代理词
2015/05/23 职场文书
禁毒主题班会教案
2015/08/14 职场文书
班主任培训研修日志
2015/11/13 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技