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 支持颜色动 ...
随机推荐
- 拉链法解决Hash节点冲突问题
<?php /* * hash::拉链法解决hash节点存储冲突问题 * ::2014-07-02 * ::Small_Kind */ class small_hash { private $s ...
- 【面试题】Https
https原理, 我很难一下子记住, https=http+ssl 先说http, 基于tcp/IP协议 传输,有三次握手 http://blog.csdn*net/xubo_zhang/art ...
- java 构造函数
1.public className(){}. 2.名称与类名相同,无返回值,无返回类型,void也不行.(就是上边的形式,除了可以有参数). 3.有0个或多个参数. 4.每个类都至少有一个const ...
- 微软职位内部推荐-Principal Dev Manager for Windows Phone Shell
微软近期Open的职位: Location: China, BeijingDivision: Operations System Group Engineering Group OverviewOSG ...
- 5.2:缓存中获取单例bean
5.2 缓存中获取单例bean 介绍过FactoryBean的用法后,我们就可以了解bean加载的过程了.前面已经提到过,单例在Spring的同一个容器内只会被创建一次,后续再获取bean直接从单例 ...
- centos7安装mplayer以及出现的各种问题
首先,centos7默认的视频播放器基本不能用,这里我们选择mplayer作为视频播放器. 安装的过程,痛并快乐着....... 首先我们去mplayer的官网下载需要的文件,http://www.m ...
- BZOJ 1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果
Description 每年万圣节,威斯康星的奶牛们都要打扮一番,出门在农场的N(1≤N≤100000)个牛棚里转悠,来采集糖果．她们每走到一个未曾经过的牛棚,就会采集这个棚里的1颗糖果． 农场不大, ...
- Apache URL rewrite 配置
下面是Apache的配置过程,可以参考下:1.httpd.conf配置文件中加载了mod_rewrite.so模块,使用虚拟主机 #LoadModule rewrite_module modules/ ...
- mysql数据库备份执行计划
为什么需要数据备份?如果数据库因为人为或其他不可控的因素导致数据库数据丢失或损坏,导致的后果将会非常严重. 为什么需要执行计划?备份操作如果每天人工管理的话,将会非常麻烦,需要借助工具来制定执行计划, ...
- ***php 数组添加关联元素的方法小结(关联数组添加元素)
我们这里介绍的是在数组中再增加关联数组了,这个就合成了多维数组,下面我来给大家举几个实例,希望对各位同学会有所帮助哈. 在"php 数组添加元素方法总结这篇文章中介绍了如何给数组添加元素,那 ...