添加新的 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. TerraExplorer Add-ons 和TEZ使用说明

    1.    概述 Skyline提供了丰富的API,用户可以根据不同实际需求,进行二次开发封装,实现各种功能的扩展和定制.当我们开发了各种功能页面或者应用程序后,如何将它们快速嵌入到TerraExpl ...

  2. SQL Server 中如何移动tempdb到新的位置

    操作步骤:1.检查tempdb的逻辑名字和它的存在位置.可以使用下面语句: SELECT name, physical_name FROM sys.master_files WHERE databas ...

  3. Scala学习(六)练习

    Scala中的对象&练习 1. 编写一个Conversions对象,加入inchesToCentimeters,gallonsToLiters和milesToKilometers方法 程序代码 ...

  4. css-文本左右对齐

    1.给目标元素加 display:block;text-align:justify; 2.如果最后一行没充满整行,因为text-align:justify,所以字字之间会有间隔,应给目标元素加伪类,添 ...

  5. springmvc 解决 controller 中出现死循环并 stackoverflow 的问题

    这是因为这个controller中的方法返回值为void类型,且没有request response这类衍生的重定向,或者返回值为String,但是是null等等的情况,都会引起死循环,然后stack ...

  6. JVM规范系列第4章：Class文件格式

    这一章节讲的是字节码的整个组成格式,读懂了这一章,就读懂了字节码文件.对于这一章的学习,我更推荐作为工具书去查找.最好是找一个最简单的Hello World例子,一个字节一个字节去分析其含义.在分析过 ...

  7. 一文让你熟练掌握Linux的ncat(nc)命令

    一文让你熟练掌握Linux的ncat(nc)命令 ncat 或者说 nc 是一款功能类似 cat 的工具,但是是用于网络的.它是一款拥有多种功能的 CLI 工具,可以用来在网络上读.写以及重定向数据. ...

  8. 分布式监控系统Zabbix-3.0.3-完整安装记录（1）

    分布式监控系统Zabbix-3.0.3的安装记录 环境说明zabbix-server:192.168.1.30     #zabbix的服务端(若要监控本机,则需要配置本机的Zabbix agent, ...

  9. 《linux内核设计与实现》第十八章

    第十八章 调试 调试工作艰难是内核级开发区别于用户级开发的一个显著特点. 一.准备开始 1.内和调试需要什么 一个bug(大部分bug通常都不是行为可靠而且定义明确的) 一个藏匿bug的内核版本(知道 ...

  10. Linux内核分析 期末总结

    Linux内核分析 期末总结 一.知识概要 1. 计算机是如何工作的 存储程序计算机工作模型:冯诺依曼体系结构 X86汇编基础 会变一个简单的C程序分析其汇编指令执行过程 2. 操作系统是如何工作的 ...