jquery追加内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#content{
width: 300px;
height: 300px;
padding:10px;
background-color: pink;
}
.base{
background-color: yellowgreen;
}
.wrap{
background-color: gray;
}
.wrap-inner{
background-color: purple;
}
</style>
<script src="design/static/js/jquery_1.10.2.min.js"></script>
</head>
<body>
<div id="content">
<p class="base">我是一条测试内容</p>
</div>
<p class="test-wrap">我是用wrap追加进来的一条内容</p>
<p class="test-wrap">我是用wrap追加进来的一条内容2</p> <p class="test-wrapAll">我是用wrapAll追加进来的一条内容</p>
<p class="test-wrapAll">我是用wrapAll追加进来的一条内容</p> <p class="test-wrap-inner">我是用来测试wrapInner的</p>
</body>
</html>
<script>
$(function(){
//A代表位置，B代表要追加的内容
//1.A.append(B) 在A的后面追加B，注意B在A的内部，即做为其孩子节点
$('#content').append('<p>我是用append追加进来的一条内容</p>');
//2.A.after(B) 即在A的后面追加A，注意A做为B的兄弟
$('#content').after('<p>我是用after追加进来的一条内容</p>');
//3.B.appendTo(A) 即把A追加到B的后面，注意A在B的内部
$('<p>我是用appendTo追加进来的一条内容</p>').appendTo($('.base'));
//4.A.prepend(B) 即在A的内部的最顶部追加B，注意B在A的内部
$('#content').prepend('<p>我是用prepend追加进来的一条内容</p>');
//5.B.prependTo(A) 即把B追加到A的内部的顶部，注意B在A的内部
$('<p>我是用prependTo追加进来的一条内容</p>').prependTo($('.base'));
//6.A.before(B) 即在A的前面追加B，注意B在A的外部
$('#content').before('<p>我是用before追加进来的一条内容</p>');
//7.B.wrap(A) 即在B的外面再包一层A
$('.test-wrap').wrap('<div class="wrap"></div>');
//$('.test-wrap').wrap($('#content'));
//8.B.wrap(A) 即在B的外面再包一层A,与wrap不同的是wrapAll包住了所有的B，而wrap则是在每个B外面都包一个A
$('.test-wrapAll').wrapAll('<div class="wrap"></div>');
//9.B.wrapInner(A) 即在B的里面加一层A
$('.test-wrap-inner').wrapInner('<div class="wrap-inner"></div>')
}); </script>
jquery追加内容的更多相关文章
- jquery 元素控制(追加元素/追加内容)
参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...
- jquery 元素控制(追加元素/追加内容)介绍及应用
http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素 ...
- jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.
jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...
- Java读取文件方法和给文件追加内容
本文转载自:http://www.cnblogs.com/lovebread/archive/2009/11/23/1609122.html 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文 ...
- javascript dom追加内容的例子
javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- JAVA向文件中追加内容(转)
向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以 ...
- linux sed命令查询结果前后批量追加内容(html文件批量修改css,js等文件路径)
1.需求:linux使用shell命令查询结果前后批量追加内容 例如:我需要在当前目录下所有的css文件路径前追加域名 我想的是用sed替换去实现,鲍哥的思路是用for循环 1.1方法1:鲍哥的for ...
- 向HDFS中追加内容
向生成好的hdfs文件中追加内容,但是线上使用的版本是1.0.3,查看官方文档发现,在1.0.4版本以后才支持文件append 以下是向hdfs中追加信息的操作方法 如果你只在某一个driver中追加 ...
- NPOI追加内容到xlsx报错，用Epplus往excle xlsx追加数据
问题的现象就是,只要不修改xlsx,一直写入或者再次写入xlsx,追加内容都是不会有问题的.但是只要你修改了xlsx,用excle2010或者2007修改了xlsx的内容里面的列宽,或者行高,或者进行 ...
随机推荐
- vi学习总结
1.模式 命令行模式:光标的移动.内容删除移动复制操作 插入模式:文字输入,即编辑状态 底行模式:文件保存或退出vi,设置编辑环境 2.基本操作 vi myfile,输入vi 文件名,,则进入vi. ...
- NOIP2016滚粗记
想了好久还是决定要写... Day0 Day-5得感冒一直没好,连磕5天药丸. 早晨得知爸妈都要上班并不能送我到校的消息,于是计划10:30集合,定表8:45准备自己走去学校. 然后平常睡得有点晚,结 ...
- Codeforces 刷水记录
Codeforces-566F 题目大意:给出一个有序数列a,这个数列中每两个数,如果满足一个数能整除另一个数,则这两个数中间是有一条边的,现在有这样的图,求最大联通子图. 题解:并不需要把图搞出来, ...
- Beta版本冲刺第一天
Aruba 408 409 410 428 429 431 完成任务: 瀑布流方块长按删除提示 实现获取剪贴板内容并保存到数据库 常驻通知栏模块界面实现,设置按钮并预留intent 立会照片: 燃尽图 ...
- thinkphp一句话疑难解决笔记 3
错误调试, E($msg)? 这个是tp内置的E 方法, E 函数. 它是tp抛异常 的另外一种方式. 默认的异常处理方式是, 在 框架下的 ThinkPHP/Tpl/think_exception. ...
- 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- php-fpm优化方法详解
php-fpm优化方法 php-fpm存在两种方式,一种是直接开启指定数量的php-fpm进程,不再增加或者减少:另一种则是开始时开启一定数量的php-fpm进程,当请求量变大时,动态的增加php-f ...
- CH模拟赛 还教室
/* 区间操作,可以推一推式子,方差为平方的平均数-平均数的平方,维护区间和与区间平方和,平方和的维护方法类似,式子推一推就行了,注意约分 */ #include<iostream> #i ...
- Go收藏
Go项目收藏 电子书 1.Go Web 编程 2.Go入门指南(the-way-to-go_ZH_CN) 3.Go语言圣经(中文版) Go by Example 中文 一些Go英文电子书 High P ...
- Cocos2d-JS/Ajax用Protobuf与NodeJS/Java通信
原文地址:http://www.iclojure.com/blog/articles/2016/04/29/cocos2d-js-ajax-protobuf-nodejs-java Google的Pr ...