在上面的例子中,我们只在被选元素的开头/结尾插入文本/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. 【SQL Server】sql server更改了数据表的字段/新增数据表的字段 无法保存

    sql server更改了数据表的字段/新增数据表的字段  无法保存 解决方法:进入 工具-->选项-->Designers-->表设计器和数据库设计器-->取消勾选   即可

  2. python3读取html文件

    # htmlf=open('E:\\test2.html','r',encoding="utf-8") # htmlcont=htmlf.read() # print(type(h ...

  3. sqlserver用于统计表索引情况

    /*eg: --调用该过程实例 --1 创建临时表 IF OBJECT_ID('tempdb..#index_sql_text') IS NOT NULL DROP TABLE #index_sql_ ...

  4. linux内核分析笔记----上半部与下半部(下)

    接着上节的来,我们在上节说了软中断和tasklet,那这最后就是工作队列了哦.. 工作队列和前面讨论的其他形式都不相同,它可以把工作推后,交由一个内核线程去执行----该工作总是会在进程上下文执行.这 ...

  5. centos7使用samba共享文件

    samba是一款可以让linux和windows下共享文件的常用的一款软件 如何在centos7中使用和配置samba 首先先安装 sudo yum install samba 下载完成查看rpm - ...

  6. 2017.11.21 postgre更新时需要联合其他表的信息

    现在需要更新t_user表,但是前台传来的参数 tenant_name 并不在这个表中,需要联合另一个表t_tenant. 要注意的一点是:set后面的字段不要写成 u.fd_validity,否则会 ...

  7. 使用IntelliJ IDEA创建Maven多模块项目

    转载:http://blog.csdn.net/xyw591238/article/details/52794788 使用Maven管理项目时,往往需要创建多个模块,模块之间存在相互引用的关系.对于M ...

  8. xunsearch使用namespace后bug修复

    xunsearch在使用了namespace后会出现不能正常使用 错误例如以下: Fatal error: Uncaught [vendors\xunsearch\lib\XSException] . ...

  9. 读取Properties配置文件, 四种方式都可以得到webroot/WEB-INF/classes这个路径

    下面四种方式都可以得到webroot/WEB-INF/classes这个路径,有什么区别,哪种方式最好? String path = this.getClass().getResource(" ...

  10. kvaser leaf light v2 在Linux 下面的使用方法

    一.安装驱动 下载地址: https://www.kvaser.cn/developer-blog/build-install-signed-kvaser-driver-modules/  严格按照操 ...