1.jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。 
实例

复制代码代码如下:
$("p").append("Some appended text."); 

2.jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。 
实例

复制代码代码如下:
$("p").prepend("Some prepended text."); 

3、after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。 
jQuery before() 方法在被选元素之前插入内容。 
实例

复制代码代码如下:
$("img").after("Some text after"); 
$("img").before("Some text before"); 

下面脚本之家小编给补充一下

append() 方法在被选元素的结尾插入内容。

prepend() 方法在被选元素的开头插入内容。

after() 方法在被选元素之后插入内容。

before() 方法在被选元素之前插入内容。

演示代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
  <ul>
    <li>第一个li标签</li>
  </ul>
</div>
 
<script>
 
  //append
  $('.testdiv ul').append('<li>append 插入的li</li>');
  //prepend
  $('.testdiv ul').prepend('<li>prepend 插入的li</li>');
  //after
  $('.testdiv ul').after('<li>after 插入的li</li>');
  //before
  $('.testdiv ul').before('<li>before 插入的li</li>');
 
</script>

运行后效果图:

html结构图

jquery append、prepend、before等等的更多相关文章

  1. jquery - append prepend after before animate clearQueue stop

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  3. (转)jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  4. jquery的append/prepend和after/before有什么区别呢?

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  5. jQuery - 添加元素append/prepend和after/before的区别

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  6. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  7. jQuery append xmlNode 修改 xml 内容

    jQuery append xmlNode 修改 xml 内容 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/04/29/jqu ...

  8. jquery append

    将已经存在的一个dom对象A,通过jquery append插入另一个dom对象B,将会改变dom树结构--即A成为了B的子元素. 举个例子: js: $(".table-container ...

  9. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

随机推荐

  1. python-day10--字符编码

    1.回顾: 软件→操作系统→硬件 2.文本编辑器: 启动:硬盘→内存→运行(cpu) 读文件:硬盘→内存→CPU读 存文件:保存到硬盘中 3.python解释器 启动:硬盘→内存→运行(cpu) 读文 ...

  2. exec可以用来执行语句的

    set @sql='select * from '+@table print @sql exec(@sql)

  3. Hibernate---运行原理

    Hibernate---运行原理

  4. iOS开发-开发文档安装

    iOS开发肯定离不开开发文档,苹果有在线帮助文档,xCode其实可以下载模拟器文档和iOS8.1文档的,不过下载的速度实在不敢恭维,而且比较头疼的是不显示下载进度条的,苹果的开发文档都是放在)/应用程 ...

  5. postgresql相关开源软件及架构简介

    1.PgBouncerPG数据库的一个轻量级连接池工具,功能及特点如下:1)缓存后端PG数据库的连接,当前端应用请求时,分配连接池中的连接给应用,从而充分利用了系统资源.2)允许应用创建比连接池更多的 ...

  6. javassist和jdk动态代理

    先来一个InvocationHandler示例,InvocationHandler类的作用是:对原始对象的方法做一个拦截. package com.zhang; import java.lang.re ...

  7. 有名管道mkfifo

    int mkfifo(const char *pathname, mode_t mode); int mknod(const char *pathname, mode_t mode, dev_t de ...

  8. hidden="hidden",display:none, visibility:hidden 三者的区别

    三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...

  9. 使用scrapy-redis构建简单的分布式爬虫

    前言 scrapy是python界出名的一个爬虫框架.Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 虽然scr ...

  10. MongoDB中_id(ObjectId)生成

    MongoDB 中我们经常会接触到一个自动生成的字段:"_id",类型为ObjectId. 之前我们使用MySQL等关系型数据库时,主键都是设置成自增的.但在分布式环境下,这种方法 ...