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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
react 中父组件与子组件双向绑定问题
May 20 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
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 变量定义方法
2009/06/14 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
浅析php工厂模式
2014/11/25 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
战友聚会邀请函
2014/01/18 职场文书
集体备课反思
2014/02/12 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python面试不修改数组找出重复的数字
2022/05/20 Python