添加新的 HTML 内容

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

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容 
     <!DOCTYPE html>
    
 <html>
    
 <head>
    
 <meta charset="utf-8">
    
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
    
 </script>
    
 <script>
    
 $(document).ready(function(){
    
     var i = 0;
    
   $("#btn1").click(function(){
    
       i ++ ;
    
     $("p").append("<b>" + i + "</b>" + "   ");
    
   });

   $("#btn2").click(function(){
    
     $("ol").append("<li>添加列表</li>");
    
   });
    
 });
    
 </script>
    
 </head>

 <body>
    
 <p>Number：</p>
    
 <ol>
    
 <li>List item 1</li>
    
 <li>List item 2</li>
    
 <li>List item 3</li>
    
 </ol>
    
 <button id="btn1">添加文本数字</button>
    
 <button id="btn2">添加列表项</button>
    
 <hr>
    
 <button onclick="appendText()">追加文本</button>
    
 </body>

 <script>
    
 function appendText(){
    
     var txt1="<b>文本------</b>";              // 使用 HTML 标签创建文本
    
     var txt2=$("<u></u>").text("文本-----");  // 使用 jQuery 创建文本
    
     var txt3=document.createElement("i");
    
     txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    
     $("body").append(txt1,txt2,txt3);        // 追加新元素
    
 }
    
 </script>
    
 </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. SkylineGlobe Android 开发 面积计算示例代码

    SkylineGlobe Android 开发 面积计算示例代码: 如果之前熟悉SkylineGlobe桌面端的二次开发,看这些代码应该不难理解. package com.skyline.terrae ...

  2. 7-(基础入门篇)关于STM32底层程序使用说明

    https://www.cnblogs.com/yangfengwu/p/9357695.html 基础教程源码链接请在淘宝介绍中下载,由于链接很容易失效,如果失效请联系卖家,谢谢 https://i ...

  3. 11-51单片机ESP8266学习-AT指令(ESP8266作为TCP客户端,连接TCP服务器,用串口调试助手和手机TCP调试助手测试)

    写完题目刚想起来一件事情,如果手机作为客户端(不连接路由器的情况下),手机连接模块的无线会分配一个IP地址,,,这个IP地址事先我也不知道....我先看看AT指令里面有没有一个指令可以打印一下连接自己 ...

  4. Linux系列教程（四）——Linux常用命令之文件和目录处理命令

    这个系列教程的前面我们讲解了如何安装Linux系统,以及学习Linux系统的一些方法.那么从这篇博客开始,我们就正式进入Linux命令的学习.学习命令,首先要跟大家纠正的一点就是,我们不需要记住每一条 ...

  5. 4.5《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—第四章小结

    本章相关重要命令总结在Table 6. 命令 描述 示例 mkdir <name> 创建某目录 $ mkdir foo pwd 显示当前所在目录 $ pwd cd <dir> ...

  6. 【SQL】MaxComputer中调试与问题排查技巧小结

    1.分段调试 面对长的SQL,出错时一般直接看定位的行号,有时候不出错但是没数据时,应该尝试分段调试,很长的SQL嵌套很多的子查询时,一个一个子查询进行分别调试,看哪一步子查询出了问题,层层推进 2. ...

  7. Luogu P4317 花神的数论题

    也是一道不错的数位DP,考虑先转成二进制后再做 转化一下问题,考虑统计出\([1,n]\)中在二进制下有\(i\)个\(1\)的方案数\(cnt_i\),那么答案显然就是\(\prod i^{cnt_ ...

  8. 通用漏洞评估方法CVSS 3.0 计算公式及说明

    CVSS 3.0 计算公式及说明 一.基础评价 1. 基础评价公式为: 当 影响度分值 <= 0: 基础分值 = 0 当 0 < 影响度分值 + 可利用度分值 < 10: 作用域 = ...

  9. hexo——轻量、简易、高逼格的博客

    背景 写blog虽然经历了N多不同时代的产品,恒久不变的始终是自己无人问津的网站.虽然没几个人看,还是隔断时间就要折腾一下.从最开始的wordpress,到tale,到现在的hexo,网站变得越来越简 ...

  10. ７０１　D. As Fast As Possible

    ###链接 ［http://codeforces.com/group/1EzrFFyOc0/contest/701/problem/D］ ###题意 n个人,走lm,有车但没人只能坐一次,车容量为k, ...