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. Confluence 6 导入 Active Directory 服务器证书 - UNIX

    为了让你的应用服务器能够信任你的目录服务器.你目录服务器上导出的证书需要导入到你应用服务器的 Java 运行环境中.JDK 存储了信任的证书,这个存储信任证书的文件称为一个 keystore.默认的 ...

  2. Population Size CodeForces - 416D (贪心,模拟)

    大意: 给定$n$元素序列$a$, 求将$a$划分为连续的等差数列, 且划分数尽量小. $a$中的$-1$表示可以替换为任意正整数, 等差数列中必须也都是正整数. 贪心策略就是从前到后尽量添进一个等差 ...

  3. 破解VS

  4. NuGet 控制台代码

    安装 Bootstrap 包:Install-package -version 3.0.0 bootstrap -projectname SportsStore.WebUI 这三句常常连用,在不同项目 ...

  5. HTML <a> 标签的伪类

    伪类的语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用. selector.class : pseudo-class {prop ...

  6. hibernate一级缓存和二级缓存的区别

    http://blog.csdn.net/defonds/article/details/2308972 缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了 ...

  7. poj3461

    题解: 简单kmp 然而strlen时间号费啊 代码: #include<cstdio> #include<cstring> using namespace std; ; #d ...

  8. 未能加载文件或程序集“Microsoft.Office.Interop.Excel

    解决方法:未能加载文件或程序集“Microsoft.Office.Interop.Excel...”   2010-07-25 08:06:15   来源:源码之家 站长整理    [大 中 小]   ...

  9. LinkedStack<T>

    public class LinkedStack<T> { private static class Node<U> { U item; Node<U> next; ...

  10. Beta 冲刺(6/7)

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10129063.html 作业博客:https://edu.cnblogs.com/campus ...