添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容 
    1.  <!DOCTYPE html>
    2.  <html>
    3.  <head>
    4.  <meta charset="utf-8">
    5.  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    6.  </script>
    7.  <script>
    8.  $(document).ready(function(){
    9.      var i = 0;
    10.    $("#btn1").click(function(){
    11.        i ++ ;
    12.      $("p").append("<b>" + i + "</b>" + "   ");
    13.    });
    14.  
    15.    $("#btn2").click(function(){
    16.      $("ol").append("<li>添加列表</li>");
    17.    });
    18.  });
    19.  </script>
    20.  </head>
    21.  
    22.  <body>
    23.  <p>Number：</p>
    24.  <ol>
    25.  <li>List item 1</li>
    26.  <li>List item 2</li>
    27.  <li>List item 3</li>
    28.  </ol>
    29.  <button id="btn1">添加文本数字</button>
    30.  <button id="btn2">添加列表项</button>
    31.  <hr>
    32.  <button onclick="appendText()">追加文本</button>
    33.  </body>
    34.  
    35.  <script>
    36.  function appendText(){
    37.      var txt1="<b>文本------</b>";              // 使用 HTML 标签创建文本
    38.      var txt2=$("<u></u>").text("文本-----");  // 使用 jQuery 创建文本
    39.      var txt3=document.createElement("i");
    40.      txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    41.      $("body").append(txt1,txt2,txt3);        // 追加新元素
    42.  }
    43.  </script>
    44.  </html>

jQuery添加和删除元素的更多相关文章

  1. JQUERY添加、删除元素、eq()方法；

    一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...

  2. jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

    jquery 添加与删除的规律 当要添加时候要定位到自己的父元素  当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

  3. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  4. Arrays.asList () 不可添加或删除元素的原因

    Java中奖数组转换为List<T>容器有一个很方便的方法 Arrays.asList(T ... a),我通过此方法给容器进行了赋值操作,接着对其进行 添加元素,却发现会抛出一个(jav ...

  5. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  6. 使用jQuery增加或删除元素(内容)

    使用jQuery增加或删除元素(内容):一.jQuery添加元素或内容:1,append() 方法:在被选元素的结尾插入元素或内容 2,prepend() 方法:被选元素的开头插入元素或内容. 3,a ...

  7. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  8. javascript数组在指定位置添加和删除元素

    在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...

  9. 顺序表添加与删除元素以及 php实现顺序表实例

    对顺序表的操作,添加与删除元素. 增加元素 如下图所示  对顺序列表 Li [1328,693,2529,254]  添加一个元素 111 ,有三种方式: a)尾部端插入元素,时间复杂度O(1);  ...

随机推荐

  1. kubernete 数据库 etcd

    etcdctl --cert-file /etc/ssl/etcd/ssl/member-pserver78.pem --key-file /etc/ssl/etcd/ssl/member-pserv ...

  2. 10-51单片机ESP8266学习-AT指令(ESP8266连接路由器,建立TCP服务器,分别和C#TCP客户端和AndroidTCP客户端通信+花生壳远程通信)

    http://www.cnblogs.com/yangfengwu/p/8871464.html 先把源码和资料链接放到这里 源码链接:https://pan.baidu.com/s/1wT8KAOI ...

  3. Luogu4173 残缺的字符串 FFT

    传送门 考虑如何使用FFT计算两个子串是否匹配.如果字符集比较小可以把每个字符都拿出来暴力做一遍,但是字符集比较大的时候复杂度就会有问题.这个时候可以考虑匹配函数. 先考虑没有通配符的情况.将\(A\ ...

  4. 转：判断js中的数据类型的几种方法

    判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...

  5. 解决webapi首次启动速度慢的问题 - z

    原理与下面两篇文章提及的相同 https://blog.csdn.net/godcyx/article/details/38517135 http://www.huaface.com/p/12

  6. JAVA消息确认机制之ACK模式

    JMS API中约定了Client端可以使用四种ACK模式,在javax.jms.Session接口中: AUTO_ACKNOWLEDGE = 1    自动确认 CLIENT_ACKNOWLEDGE ...

  7. RabbitMQ 发布订阅-实现延时重试队列(参考)

    RabbitMQ消息处理失败,我们会让失败消息进入重试队列等待执行,因为在重试队列距离真正执行还需要定义的时间间隔,因此,我们可以将重试队列设置成延时处理.今天参考网上其他人的实现,简单梳理下消息延时 ...

  8. libmysqlclient.so.16: cannot open shared object file: No such file or directory

    编译安装的mysql5.6.39,安装目录是/usr/local/mysql,启用程序时报错:libmysqlclient.so.16: cannot open shared object file: ...

  9. svn代码发版的脚本分享

    背景:开发将其代码放到svn里面,如何将修改后存放到svn里的代码发布到线上?简单做法:写个shell脚本,用于代码发版.比如开发的代码存放svn的路径是:svn://112.168.19.120/h ...

  10. NSCache的简单使用

    简介 1)NSCache 是苹果官方提供的缓存类,用法与 NSMutableDictionary 的用法很相似,在 AFNetworking 和 SDWebImage 中,使用它来管理缓存. 2)NS ...