<!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追加内容的更多相关文章

  1. jquery 元素控制(追加元素/追加内容)

    参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...

  2. jquery 元素控制(追加元素/追加内容)介绍及应用

    http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素  ...

  3. jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.

    jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...

  4. Java读取文件方法和给文件追加内容

    本文转载自:http://www.cnblogs.com/lovebread/archive/2009/11/23/1609122.html 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文 ...

  5. javascript dom追加内容的例子

    javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  6. JAVA向文件中追加内容(转)

    向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以 ...

  7. linux sed命令查询结果前后批量追加内容(html文件批量修改css,js等文件路径)

    1.需求:linux使用shell命令查询结果前后批量追加内容 例如:我需要在当前目录下所有的css文件路径前追加域名 我想的是用sed替换去实现,鲍哥的思路是用for循环 1.1方法1:鲍哥的for ...

  8. 向HDFS中追加内容

    向生成好的hdfs文件中追加内容,但是线上使用的版本是1.0.3,查看官方文档发现,在1.0.4版本以后才支持文件append 以下是向hdfs中追加信息的操作方法 如果你只在某一个driver中追加 ...

  9. NPOI追加内容到xlsx报错，用Epplus往excle xlsx追加数据

    问题的现象就是,只要不修改xlsx,一直写入或者再次写入xlsx,追加内容都是不会有问题的.但是只要你修改了xlsx,用excle2010或者2007修改了xlsx的内容里面的列宽,或者行高,或者进行 ...

随机推荐

  1. iMac 打包

    1.打包成 dmg 1.1.编译文件 打开工程文件之后选取Products,复制 "项目名.app" 到指定文件夹 1.2.打开磁盘工具(所有程序-> 实用工具 ->磁 ...

  2. AnjularJS系列1 —— 样式相关的指令

    最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...

  3. js 对象的_proto_

    js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...

  4. Dell R730 配置完RAID后装系统找不到硬盘。

    1. 各硬盘只是灯都正常.硬件无故障. 2. 8个600G硬盘做的RAID0和RAID5后都在装系统选盘处找不到硬盘.(注意: 第一次做raid 时,没有进行初始化init.后补做也无效,一直复现这个 ...

  5. linux中rz中的-e选项

    linux shell rz和sz是终端下常用的文件传输命令,rz和sz通过shell被调用,其中rz用于从启用终端的系统上传文件到目标系统(终端登录的目标系统), 这里不过多介绍这些命令,只是记录一 ...

  6. php function集合

    /*更新商品的某个字段*/ function update_goods($goods_id, $field, $value) { if ($goods_id) { /* 清除缓存 */ clear_c ...

  7. oracle服务起不来以及无法监听问题解决

    改问题是在搭建起一个很早之前的数据库的时候碰见的,虽然这个问题网上已经有很多相关的帖子,但因最近碰见多次这样的问题,特此简单记录: 1.最开始碰见的问题是:The listener supports ...

  8. DI中Transient Scoped Singleton Instance的区别

    Observe which of the OperationId values varies within a request, and between requests. Transient obj ...

  9. AD域组策略-只显示指定的控制面板选项配置方法

    操作方法: 1.打开组策略管理器,新建一个组策略并右击编辑. 2,找到隐藏指定的“控制面板”项并双击打开:并参照设置: 填入要显示的控制面板项目,比如: joystick.cpl 表示将显示“游戏控制 ...

  10. 如何配置IIS处理多并发请求及存在的问题

    很多时候多线程能快速高效独立的计算数据,应用比较多. 但今天遇到的多进程下的问题更是让人觉得复杂 多进程下static变量都要失效,就目前的平台和产品static使用是很多的,各种session.ca ...