在上面的例子中,我们只在被选元素的开头/结尾插入文本/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. CSS3:box-sizing 怪异盒模型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. mongodb_profier

    http://docs.mongodb.org/manual/reference/database-profiler/ 一.获取.设置profile(profile用collection存储数据) d ...

  3. 在Windows平台下安装与配置Memcached及C#使用方法

    1.在Windows下安装Memcached 资料来源:http://www.jb51.net/article/30334.htm 在Windows平台下安装与配置Memcached的方法,Memca ...

  4. 在Oracle Enterprise Linux R5U7上安装Oracle 11gr2数据库

    折腾了好几次,经验是: 包的安装 在安装包里,需要把开发方面的安装包都装上. 另外安装完成后,需要安装的包包括: cd /media/cdrom/Server rpm -Uvh binutils-2. ...

  5. 我使用过的Linux命令之swig - 把C/C++的代码嵌入Java等语言的开发工具

    用途说明 SWIG是Simplified Wrapper and Interface Generator的缩写,其官方站点是http://www.swig.org/.SWIG是个帮助使用C或者C++编 ...

  6. More is better——并查集求最大集合(王道)

    Description Mr Wang wants some boys to help him with a project. Because the project is rather comple ...

  7. Windows下编译vpx获得各个项目VS2010解决方案的步骤

    最近研究了一下几种常见的视频编码器:x264,x265,vpx.本文简单记录一下它们的编译方法. x264,x265,vpx这三个开源的视频编码器可以说是当今“最火”的视频编码器.x264现在占据着H ...

  8. [Parcel] Running TypeScript with parcel-bundler

    TO get started with TypeScirpt quickly in your local computer is using parcel-bunlder: npm i -g parc ...

  9. 【翻译自mos文章】在Oracle单机数据库中定义database service

    来源于: Defining a Database Service with a Stand Alone Database (文档 ID 1260134.1) APPLIES TO: Oracle Da ...

  10. html5表单验证(Bootstrap)

    html5表单验证(Bootstrap)   邮箱验证: <input name="email" type="text" placeholder=&quo ...