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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
js 操作符实例代码
Oct 24 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
js时间控件只显示年月
Jan 08 Javascript
深入理解vue Render函数
Jul 19 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
微信小程序实现时间进度条功能
Nov 17 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图像处理类代码分享
2012/01/19 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
vue中的inject学习教程
2019/04/24 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
浅谈Python中的继承
2020/06/19 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
自荐信格式
2013/12/01 职场文书
计算机个人求职信范例
2014/01/24 职场文书
社区健康教育实施方案
2014/03/18 职场文书
演讲比赛策划方案
2014/06/11 职场文书
教师个人自我评价
2015/03/04 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
个人求职意向书
2015/05/11 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python