在上面的例子中,我们只在被选元素的开头/结尾插入文本/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. 推荐10个免费的HTML编辑器

    如果你想开发一个网站,你肯定想要一个很棒的HTML编辑器,一个好的编辑器可以让代码更加整齐格式化,前端显示也会更好,从而提升你的工作效率.下面就为开发者推荐10个免费的HTML编辑器,你可以尝试使用. ...

  2. GDUT决赛题解

    决赛,我自我认为题目难度更大,反而我的心态更好了. 由于放轻松的时候反而效果更好,跟昨天的观点一样,凡是可以1A的,才算这题做得好. A.数目不大,关键是看懂题(我自己连输入输出是什么都不清楚.... ...

  3. NTFS数据流和web安全

    NTFS流简单介绍: NTFS因为它的稳定性 强大的功能 以及它所提供的安全性而成为一种更优越的文件系统,NTFS交换数据流(ADSs)是为了和Macintosh的HFS文件系统兼容而设计的,它使用资 ...

  4. Shell--nl命令

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  5. BZOJ 4174 tty的求助 莫比乌斯反演

    题目大意:求∑Nn=1∑Mm=1∑m−1k=0⌊nk+xm⌋ mod 998244353 如果n和m都已经确定了.如今要求这坨玩应: ∑m−1k=0⌊nk+xm⌋ =∑m−1k=0(⌊nk%m+xm⌋ ...

  6. [Spring boot] Application properties and configurations

    We can use different application properties application.properties: server.port=9090 application-pro ...

  7. jQuery--百度百科

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

  8. css处理超出文本截断问题的两种情况(多行或者单行)

    1.非多行的简单处理方式: css代码: .words{ width:400px; overflow:hidden; /*超过部分不显示*/ text-overflow:ellipsis; /*超过部 ...

  9. VB的第一个项目

     前言-----本人也是刚刚接触VB,企业的VB代码基本能看的懂,但是自己开发,只能呵呵.一般在刚学习一门新的语言时,很容易发生一些自己相当然的认识错误,so,记下并分享开发学习的过程,望指正.--- ...

  10. Retrofit2和RxJava配合使用Demo

    和Retrofit2单独使用有一些区别 首先,同样写个interface,这里是GitHubService.java,我们这次要实现获取官方提供的测试接口的数据 public interface Gi ...