jquery的API查看 / prepend、prependTo、append、appendTo的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.div{border: 1px solid red;}
p{color:green;}
h1{color:darkgoldenrod;}
input{
display: block;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="main">
<div class="div"><span>div</span></div>
<p>p标签</p>
</div>
<input type="button" value="重置 " id="reset"/>
<input type="button" value="append--把p标签移动到div标签里 ---实则为移动元素" id="btn1"/>
<input type="button" value="append--复制p标签到div标签里，原来的标签还保留着(克隆)" id="btn2"/>
<input type="button" value="appendTo--将p标签追加到div元素 ---实则为移动元素" id="btn3"/>
<input type="button" value="appendTo--新建元素p追加到div中的元素集合内部的最后面" id="btn4"/>
<input type="button" value="prependTo--将新建的p元素插入到div中的元素集合内部的最前面" id="btn5"/>
<input type="button" value="prepend--将新建的h1插入到div中的元素集合内部的最前面" id="btn6"/>
<input type="button" value="prepend--将已有的p标签插入到div中的元素集合内部的最前面 -- 实则为移动元素" id="btn7"/> </body>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
var str = $('.main').html();
$("#reset").click(function(){
$('.main').html(str);
})
$("#btn1").click(function(){
//把p标签移动到div标签里
$('.div').append( $('p'));
})
$("#btn2").click(function(){
//只是复制一份到div标签里，原来的标签还保留着(克隆)
$('.div').append( $('p').clone(true))
}) $("#btn3").click(function(){
//将p追加到div元素 ---实则为移动元素
$('p').appendTo($('.div'));
}) $("#btn4").click(function(){
//新建元素p追加到div元素中
$('<p>新建元素p追加到div中的元素集合内部的最后面</p>').appendTo($('.div'));
}) $("#btn5").click(function(){
//将新建的p元素插入到div中的元素集合内部的最前面
$('<p>将新建的p元素插入到div中的元素集合内部的最前面</p>').prependTo($('.div'));
}) $("#btn6").click(function(){
//将新建的h1插入到div中的元素集合内部的最前面
$('.div').prepend('<h1>将新建的h1插入到div中的元素集合内部的最前面</h1>'); //值得注意的是prepend函数后面的参数是内容，不是对象。而prependTo函数前后都是对象。
}) $("#btn7").click(function(){
//将已有的p元素插入到div中的元素集合内部的最前面 -- 实则为移动元素
$('.div').prepend($('p'));
}) })
</script>
</html>
jquery的API查看 / prepend、prependTo、append、appendTo的用法的更多相关文章
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- jquery：after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- 比较jquery中的after(),append(),appendTo()方法
html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...
- JQuery中after() append() appendTo()的区别
首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- 【jquery】 API讲解 内部培训资料
资料在百度云盘 一.jquery API讲解 1.jquery api如何使用 jquery api http://www.hemin.cn/jq/ 2.常用api讲解 选择器: 通过$()获取 ...
- jquery的api以及用法总结-数据/操作/事件
数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...
- jquery 常用api 小结2
*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
随机推荐
- 奖学金评分系统（系统分析与设计版与Delphi实现代码）
一.系统规划 1.1 项目背景介绍 在奖学金评比过程中,学生综合测评是学校普遍采用的评比手段.对学生实施综合素质测评的目的在于正确评价学生的综合素质,为评奖学金提供依据,实现学生教育管理工作的标准化. ...
- chm文件打开，有目录没有内容
下载下来的一些chm文件,打开的是否提示“打开此文件前总是询问”,不理睬直接打开后,只有目录,页面内容都显示“已取消到本页的导航”.原因是该CHM文件的发行商未知,将“打开此文件前总是询问”选项取消后 ...
- .net google calendar
https://developers.google.com/gdata/client-cs http://www.codeproject.com/Articles/64474/How-to-Read- ...
- python学习笔记6（字典）
映射:键值对的关系,键(key)映射值(value) 字典是Python唯一的映射类型 >>> phonebook = {'} >>> phonebook {'} ...
- java第六课 oop
java oop 1.面向过程的结构化程序设计弊端:方法和数据结构都是毫无规律的定义在程序中任何位置 方法定义和方法要处理的数据结构也都是分开定义 2.对象:每new一次,就创建1个新对 ...
- idea14使用maven创建web工程
参考博客:http://geeksun.iteye.com/blog/2179658 http://www.bubuko.com/infodetail-387387.html ------------ ...
- 【转载】test和cmp比较
标 题:test和cmp一个很菜很基础的话题! 作 者: FTBirthday 时 间:2003/05/19 01:14am 链 接:http://bbs.pediy.com 看过破解教程,都知道te ...
- hdu 4035 Maze 概率DP
题意: 有n个房间,由n-1条隧道连通起来,实际上就形成了一棵树, 从结点1出发,开始走,在每个结点i都有3种可能: 1.被杀死,回到结点1处(概率为ki) ...
- android 安全需要关注
1.通过签名校验保护,能有效避免应用被二次打包,杜绝盗版应用的产生2.对内存数据进行变换处理和动态跟踪,有效防止数据被获取和修改3.对代码进行加密压缩,可防止破解者还原真实代码逻辑,避免被复制4.多重 ...
- android应用崩溃的调试方法(c++ lib so文件库崩溃)
android调试工具addr2line使用: 1.将ndk中的arm-linux-androideabi-addr2line可执行文件的路径加入配置文件~/.bashrc中,例如: export P ...