在上面的例子中,我们只在被选元素的开头/结尾插入文本/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. Android Studio使用过程中Java类突然报红,但项目可运行解决方案

    1.点击File->Invalidate Caches / Restart... 2.重启Gradle,清除缓存 3.Clean Project

  2. 搭建vue全家桶

    1.直接利用vue-cli脚手架快速搭建 (1)全局安装vue-cli npm install -g vue-cli (2)创建项目 vue init webpack-simple my-projec ...

  3. js时间小总结

    1.js获取时间 var myDate = new Date(); 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份 ...

  4. mac上虚拟机:VMWare Fusion, VirtualBox, Parallels Desktop, CrossOver, Veertu

    作者:Louis Tong链接:https://www.zhihu.com/question/35731328/answer/66127970来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...

  5. 加入新的linux系统调用

    上一篇详解了linux系统调用的原理,接下来依据上一篇的原理简介怎样创建新的linux系统调用 向内核中加入新的系统调用,须要运行3个步骤: 1. 加入新的内核函数 2. 更新头文件unistd.h ...

  6. IP windows相关

    nbtstat: 假设 我们  通过net view 获取了 局域网内一些计算机名 如上标红的计算机名称 如何 才能获取计算机的ip呢? 接下来使用  nbtstat -a  列出远程机器的名称表: ...

  7. Zabbix的SNMPTrap监控配置

    SNMPTrap监控主要用于设备发生故障时的主动通知的监控.以下简单记录下Zabbix的SNMPTrap的配置方法. 一.SNMPTrap监控的处理流程说明 1.监控对象发送SNMPTrap信息到sn ...

  8. python之web路径扫描工具

    # coding: UTF-8 import sys, os, time, httplibimport relist_http=[]  #http数组 def open_httptxt():  #打开 ...

  9. Idea 代码编辑错误不飘红提示

    Power Save Mode 勾选去掉即可

  10. LoadRunner测试AJAX

    什么是AJAX? Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for cre ...