在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。

不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

实例

function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}

通过 append() 和 prepend() 方法添加若干新元素的更多相关文章

  1. 通过 after() 和 before() 方法添加若干新元素

    after() 和 before() 方法能够通过参数接收无限数量的新元素.可以通过 text/HTML.jQuery 或者 JavaScript/DOM 来创建新元素. 在下面的例子中,我们创建若干 ...

  2. 关于jQuery的append()和prepend()方法的小技巧

    最近工作上有个需求是要求一个自动向上滚动的列表,表有很多行,但只显示一行,每次滚动一行.很简单的一个功能,代码如下 <div class="scroll-area"> ...

  3. 添加新内容的四个 jQuery 方法:append,prepend,after,before

    添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...

  4. appendChild append insertBefore prepend

      CreateTime--2017年11月2日16:57:59 Author:Marydon appendChild()与append() insertBefore()与prepend()区别与联系 ...

  5. jQuery-添加新元素的方法(append()、prepend()、before()、after())

    1.以 HTML 创建新元素 var txt1="<p>Text.</p>"; 2.以 jQuery 创建新元素 var txt2=$("< ...

  6. jQuery 追加元素的方法如append、prepend、before,after(转)

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  7. jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  8. 获取器操作都是针对数据而不是数据集的,要通过append()方法添加数据表不存在的字段

    获取器操作都是针对数据而不是数据集的,要通过append()方法添加数据表不存在的字段 public function getMembership(){ //加入会员s_id = 1 $busines ...

  9. jquery中append、prepend, before和after方法的区别(一)

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

随机推荐

  1. 关于在.NET中 DAL+IDAL+Model+BLL+Web

    其实三层架构是一个程序最基本的 在.Net开发中通常是多层开发比如说    BLL 就是business Logic laywer(业务逻辑层) 他只负责向数据提供者也就是DAL调用数据 然后传递给 ...

  2. PostgreSQL配置文件--资源使用(除WAL外)

    2 资源使用(除WAL外) RESOURCE USAGE (except for WAL) 2.1 内存 Memory 2.1.1 shared_buffers 数字型 默认: shared_buff ...

  3. python函数getopt用法

    python内建模块,用来处理命令行参数 格式:getopt(args, shortopts, longopts = []) 参数args一般是sys.argv[1:]sys.argv[0]表示执行文 ...

  4. leetcode第一刷_Edit Distance

    最小编辑距离.非常经典的问题.今年微软实习生的笔试有一个这个的扩展版,牵扯到模板之类的,当时一行代码也没写出来. . dp能够非常优雅的解决问题.状态转移方程也非常明白.用pos[i][j]表示wor ...

  5. PHP5实现foreach语言结构遍历一个类的实例

    PHP5实现foreach语言结构遍历一个类 创建一个类集成Iterator接口,并实现Iterator里面的方法即可,下面见实例代码实现 <?php class Test implements ...

  6. 解决Ubuntu环境变量错误导致无法正常登录  (command 'xxx' is available in bin ls)

    一.问题产生 配置JDK时,按照搜索到的一篇文章中的做法,修改了/etc/profile文件里的内容.在原内容保持不变的基础上,大致添加了以下内容: export JAVA_HOME=.... exp ...

  7. TestNG+Maven+IDEA环境搭建

    TestNG+Maven+IDEA环境搭建 前言: 主要进行TestNG测试环境的搭建 所需环境: 1.IDEA UItimate 2.JDK 3.Maven 一.创建工程 File –>new ...

  8. Servlet——简单用户登录实例+http协议解析

    编写项目.用户登录系统1.0版本号 登录界面Servlet: package com.gavin.view; import java.io.IOException; import java.io.Pr ...

  9. Java8 增强的Future:CompletableFuture(笔记)

    CompletableFuture是Java8新增的一个超大型工具类,为什么说她大呢?因为一方面它实现了Future接口,更重要的是,它实现了CompletionStage接口.这个接口也是Java8 ...

  10. 三位一体的漏洞分析方法-web应用安全测试方法

    本文转自乌云知识库 0x00 前言 节选自: http://www.owasp.org.cn/OWASP_Conference/owasp-20140924/02OWASPWeb20140915.pd ...