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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue实现打地鼠小游戏
Aug 21 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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如何抛出异常处理错误
2011/03/02 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Django model select的多种用法详解
2019/07/16 Python
python中web框架的自定义创建
2019/09/08 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python函数生成器原理及使用详解
2020/03/12 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
公司户外活动总结
2014/07/04 职场文书
高中同学会活动方案
2014/08/14 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
金秋助学感谢信
2015/01/21 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js