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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 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 如何向 MySQL 发送数据
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
ThinkPHP控制器详解
2015/07/27 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
javascript处理table表格的代码
2010/12/06 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
JavaScript手机振动API
2016/06/11 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
jQuery操作事件完整实例分析
2020/01/10 jQuery
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python实现电子词典
2020/04/23 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
详解Python编程中time模块的使用
2015/11/20 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
中学生期末评语
2014/02/03 职场文书
五水共治一句话承诺
2014/05/30 职场文书
奶茶店创业计划书
2014/08/14 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
教师个人年度总结
2015/02/11 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python