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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 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 已经成熟
2006/12/04 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP5函数小全(分享)
2013/06/06 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
js转html实体的方法
2016/09/27 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python3简单实现串口通信的方法
2019/06/12 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
建筑横幅标语
2014/10/09 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
python小程序之飘落的银杏
2021/04/17 Python
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers