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 Object 对象学习笔记
Dec 17 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
vue实现菜单切换功能
May 08 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
用vue写一个日历
Nov 02 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
JavaScript的Set数据结构详解
Feb 18 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从字符串创建函数的方法
2015/03/16 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
js获取ip和地区
2017/03/10 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
基于Python log 的正确打开方式
2018/04/28 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
学生自我评价范文
2014/02/02 职场文书
HR求职自荐信范文
2014/06/21 职场文书
课外小组活动总结
2014/08/27 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
公诉意见书范文
2015/06/05 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript