在上面的例子中,我们只在被选元素的开头/结尾插入文本/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. Oracle的日志记录模式

    本篇摘自 http://www.cnblogs.com/cnjava/archive/2012/04/09/2439497.html --=============================== ...

  2. 关于constraint 的disable和enable

    建立主外键的constraint create table emp1(emp_no number(2) constraint emp_emp_no_pk primary key,ename varch ...

  3. 设置html属性为disabled时flask后台获取数据失败

    标签input的值如果不需要用户修改,则设置属性为 readonly,不要设置为 disabled.因为设置disabled会导致flask后端获取不到这个input得value rule_maker ...

  4. 在Linux中切换用户时变成-bash-4.3$

    增加普通用户 [root@git-node1 ~]#useradd nulige [root@git-node1 ~]#passwd nulige 输入两次密码 [root@git-node1 ~]# ...

  5. javascript快速入门4--函数与内置对象

    函数 函数(又称为方法)用于对一大段为了达到某种目的的代码进行归类,以使代码更具有条理: //一段计算三角形面积的代码 var wide=window.prompt("请输入三角形的底边长度 ...

  6. yii2 URL重写 nginx的配置

    Url的重写 nginx的配置文件 [root@localhost protected]# vim /etc/nginx/conf.d/default.conf server { listen     ...

  7. 在Centos 7中使用 Docker搭建MySQL异地双向复制环境

    (0)一些准备操作: Centos安装好之后(这里使用的是vm虚拟机) 将当前用户添加到sudoers中: su root vim /etc/sudoers 找到 root ALL=(ALL) ALL ...

  8. 更改Eclipse下Tomcat的部署目录

    转自:http://kingxss.iteye.com/blog/1741438 前言 今天tomcat启动就报错,后来查原因是因为异常关闭tomcat的原因,需要删除一个sessions.ser的文 ...

  9. git学习——远程仓库操作

    查看当前的远程库——git remote 列出了仅仅是远程库的简单名字 可以加上-v 现实对应的克隆地址 添加远程仓库——git remote add [shortname] [url] git re ...

  10. 关于public、private、protected、internal

    1.private修饰符 private修饰符用于设置类或类成员的訪问权限仅为所属类的内部, private也被称为私有修饰符.某些时候须要訪问私有类成员时,可通过get和set訪问器读取或改动. 2 ...