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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
JS 数组基本用法入门示例解析
Jan 16 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP无限分类(树形类)
2013/09/28 PHP
destoon数据库表说明汇总
2014/07/15 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
js 目录列举函数
2008/11/06 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python新手学习可变和不可变对象
2020/06/11 Python
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
列车长先进事迹材料
2014/01/25 职场文书
原材料检验岗位职责
2014/03/15 职场文书
员工生日活动方案
2014/08/24 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
写景作文评语集锦
2014/12/25 职场文书
团支部书记竞选稿
2015/11/21 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL