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

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

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

实例

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

通过 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. 【js 正则表达式】记录所有在js中使用正则表达式的情况

    说实话,对正则表达式有些许的畏惧感,之前的每次只要碰到需要正则表达式去匹配的情况,都会刻意的躲过或者直接从度娘处获取. 此时此刻,感觉到了某一个特定的点去触及她.但笔者对于正则表达式使用上的理解是这样 ...

  2. android线程及线程池

    众所周知,在UI系统中进行一些耗时操作,都会导致卡顿现象,因为一次刷新在16ms,如果当次操作过了这个时间,那么用户就能感觉到明显的卡顿,甚至引起ANR . 对于这种情况,一般都是再起一个线程,进行一 ...

  3. Android API level 版本对应关系

    详情地址:http://developer.android.com/guide/topics/manifest/uses-sdk-element.html Platform Version API L ...

  4. Oracle Service Bus Socket Adapter调整的参数

    之前在一个客户中做压力测试时候Oracle Service Bus性能大概达到900tps左右,和客户期望的1600tps有很大差距. 在研究了Socket Adapter的工作原理之后,判断可能是O ...

  5. RenderMonkey基本使用方法【转】

    RenderMonkey基本使用方法 楔子: 差不多从年中开始由于工作需要,开始研究Direct3D,这是继大二开始自学DX开始,睽违了6年后再重新学习DX.虽然时间很久了,但是幸亏还是有点基础,所以 ...

  6. 在Docker中从头部署自己的Spark集群

    由于自己的电脑配置普普通通,在VM虚拟机中搭建的集群规模也就是6个节点左右,再多就会卡的不行 碰巧接触了Docker这种轻量级的容器虚拟化技术,理论上在普通PC机上搭建的集群规模可以达到很高(具体能有 ...

  7. 插件化注解处理API(Pluggable Annotation Processing API)

    Java奇技淫巧-插件化注解处理API(Pluggable Annotation Processing API) 参考资料 JDK6的新特性之六:插入式注解处理API(Pluggable Annota ...

  8. 网络编程基础——学习阻塞,非阻塞(select和epoll)

    <h3 class="xyn" helvetica="" neue',="" helvetica,="" aria ...

  9. css选择器和xpath对照表

  10. php中的 file_get_contents(‘php://input’)用法

    php中的 file_get_contents('php://input')用法: file_get_contents 获取php页面中input内容的值: eg: php: 页面提交了usernam ...