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 相关文章推荐
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
canvas实现贪食蛇的实践
Feb 15 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
我的论坛源代码(四)
2006/10/09 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
MSN消息提示类
2006/09/05 Javascript
javascript编程起步(第二课)
2007/02/27 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
React实现全选功能
2020/08/25 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
yy结婚证婚词
2014/01/10 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
元旦联欢会主持词
2014/03/26 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015年入党决心书
2015/02/05 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技