jQuery中appendTo()方法用法实例


Posted in Javascript onJanuary 08, 2015

本文实例讲述了jQuery中appendTo()方法用法。分享给大家供大家参考。具体分析如下:

此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部。
appendTo()方法的作用和append()方法是相同的,但是语法是不同的,尽管形式一样。

语法结构:

$(selector).appendTo(content)

参数列表:
参数 描述
selector 要被插入的匹配元素。
content 要被插入匹配元素的元素。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>appendTo()函数-三水点靠木</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").appendTo("div");

  })

})

</script>

</head>

<body>

<p>我是p的内容</p>

<div>我是div</div>

<button>点击查看效果</button>

</body>

</html>

以上代码中,当点击按钮的时候,能够将p元素移动到div元素的内部的尾部。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 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
javascript 动态创建表格
Jan 08 #Javascript
javascript实现避免页面按钮重复提交
Jan 08 #Javascript
You might like
PHP Cookie的使用教程详解
2013/06/03 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JS模板实现方法
2013/04/03 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
js单词形式的运算符
2014/05/06 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python使用functools实现注解同步方法
2018/02/06 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
python之列表推导式的用法
2019/11/29 Python
python 创建一维的0向量实例
2019/12/02 Python
django教程如何自学
2020/07/31 Python
重构Python代码的六个实例
2020/11/25 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
八年级物理教学反思
2014/01/19 职场文书
业务总经理岗位职责
2014/02/03 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
计算机实训心得体会
2016/01/14 职场文书
八年级物理教学反思
2016/02/19 职场文书