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. thinkphp数组处理

    1.array_unique() 移除数组中的重复的值,并返回结果数组.当几个数组元素的值相等时,只保留第一个元素,其他的元素被删除,对每个值只保留第一个遇到的键名,接着忽略所有后面的键名.返回的数组 ...

  2. php中的curl的一些参数总结

    curl可以根据是否是http或则是https选择加密发送的内容: 使用curl发送请求的基本流程 1,初始化连接句柄: 2,设置curl选项: 3,执行并获取结果: 4,释放curl连接句柄: 例子 ...

  3. Delphi XE Starter Essentials 中文目录

    Table of Contents1. Delphi XE Starter IDE 1Delphi and C++Builder ................................... ...

  4. 三个安装,手机看VIP电影。写给亲爱的学习

    三个安装,看VIP电影. 市场安装firefox 安装Tempermonkey 打开firefox,点击右上角的三个点,点击附加组件 继续点击浏览全部firefox附加组件 在上面的搜索框输入 tam ...

  5. php json 解析有stdClass Object 解决办法

    php json 解析有stdClass Object mixed json_decode ( string $json [, bool $assoc = false [, int $depth = ...

  6. <NET CLR via c# 第4版>笔记 第11章 事件

    11.1 设计要公开事件的类型 11.1.1 第一步: 定义类型来容纳所有需要发送给事件通知接收者的附加信息 //第一步:定义一个类型来容纳所有应该发送给事件通知接收者的附加信息 internal c ...

  7. 获取bean的两种方式

    BeanFactory方式: 1: public void testFactory(){ ResourcePatternResolver rpt=new PathMatchingResourcePat ...

  8. 深入理解Linux网络技术内幕——内核基础架构和组件初始化

    引导期间的内核选项     Linux允许用户把内核配置选项传给引导记录,再有引导记录传给内核,以便对内核进行调整.     start_kernel中调用两次parse_args,用于引导期间配置用 ...

  9. <?xml version="1.0" encoding="UTF-8" standalone="no"?>

    XML standalone 定义了外部定义的 DTD 文件的存在性. standalone element 有效值是 yes 和 no. 如下是一个例子: <?xml version=&quo ...

  10. Python id

    # id()函数可以帮我们查看一个变量的内存地址 a = 10 b = 30 print(id(a)) print(id(b)) lst = ["周杰伦","麻花藤&qu ...