在上面的例子中,我们只在被选元素的开头/结尾插入文本/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. Kubernetes ServiceAccount的配置

    开始配置Kubernetes集群的时候为了少出问题,都是在apiserver配置中去掉ServiceAccount采用非安全连接的方式,但在后面配置FEK日志的过程中,很多时候绕不开这个安全机制,但因 ...

  2. Javascript高级程序设计 -- 第三章 -- 总结

    1.Javascript有几种数据类型 2.变量 Javascript有几种数据类型 JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Nu ...

  3. javascript快速入门20--Cookie

    Cookie 基础知识 我们已经知道,在 document 对象中有一个 cookie 属性.但是 Cookie 又是什么?“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称 ...

  4. mipmap 二

    mipmap 之前讲了生成 原理 这个讲下我对性能的理解 mipmap 对性能的影响 包含两方面 minification时,采样多个textel得到1个pixel颜色,如果是mipmap形成相邻两个 ...

  5. 前端传递参数,由于控制器层类实现了struts2的ModelDriven而产生的一个异常

    产生的异常如下: ognl.MethodFailedException: Method "setId" failed for object com.aliyun.pcitcAliy ...

  6. Java笔记4:JDBC纯驱动方式连接Oracle

    JDBC纯驱动方式连接Oracle 1 下载Oracle提供的驱动程序包 下载地址: http://www.oracle.com/technetwork/database/enterprise-edi ...

  7. mysql show profiles使用分析sql性能

    mysql show profiles使用分析sql性能 Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后. 查看一下我的数据库版本 mysql> ...

  8. Tomcat:IOException while loading persisted sessions: java.io.EOFException 解决

    转自:http://www.blogjava.net/apple0668/archive/2007/10/12/152383.html Tomcat启动时如下错误: 严重: IOException w ...

  9. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何动态显示当前运行行

    在F11运行状态下,点击Online-Display Flow Control然后可以看到绿色的行就是当前正在运行行     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http:// ...

  10. Linux 网卡驱动学习(一)(分析一个虚拟硬件的网络驱动样例)

    在Linux,网络分为两个层,各自是网络堆栈协议支持层,以及接收和发送网络协议的设备驱动程序层. 网络堆栈是硬件中独立出来的部分.主要用来支持TCP/IP等多种协议,网络设备驱动层是连接网络堆栈协议层 ...