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 相关文章推荐
文本框文本自动补全效果示例分享
Jan 19 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python django中8000端口被占用的解决
2019/12/17 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
公司总经理工作职责管理办法
2014/02/28 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
大学生毕业求职信
2014/06/12 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
解决golang 关于全局变量的坑
2021/05/06 Golang
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript