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 匿名函数及其代码模式原理
Mar 19 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
深入研究React中setState源码
Nov 17 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php 设计模式之 单例模式
2008/12/19 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
php简单获取复选框值的方法
2016/05/11 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
做网页的一些技巧(续)
2007/02/01 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
文员个人求职自荐信
2013/09/21 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS