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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP中实现进程间通讯
2006/10/09 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python打开文件的方式有哪些
2020/06/29 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
中学门卫岗位职责
2013/12/26 职场文书
党组织公开承诺书
2014/03/29 职场文书
学生请假条格式
2014/04/11 职场文书
岗位安全生产责任书
2014/07/28 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
关于运动会的广播稿
2014/09/22 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
铅球加油稿100字
2014/09/26 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS