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. 斐波拉契数列(用JavaScript和Python实现)

    1.用JavaScript 判断斐波拉契数列第n个数是多少 //需求:封装一个函数,求斐波那契数列的第n项 //斐波拉契数列 var n=parseInt(prompt("输入你想知道的斐波 ...

  2. 3 python 基本数据类型

    1.python的基本数据类型 1.字符串 不可变数据类型 2.int //整除 %取余 bit_length() print(a.bit_length()) #打印某个数字类型的二进制长度 3.bo ...

  3. PHP函数总结 (七)

    <?php /** * 匿名函数(闭包函数): * php>=5.3 * 允许临时创建一个没有指定名称的函数,常作为回调函数参数的值 * * 闭包的另一个概念: * 在内部函数中可以使用外 ...

  4. android升级adt和sdk之后无法识别SDK Location的一个解决方式

    我把android的adt和sdk从4.0升级到4.2,发现eclipse的android设置里面原来列出的各种api level的platform消失了,而且无法新建android工程.而且检查过了 ...

  5. JQuery $未定义

    ---恢复内容开始--- JQuery $未定义 转载▼   jquery是Yii集成的,利用jquery写的代码$(document).ready(function(){// 操作列表$('.ope ...

  6. SqlDataReader的用法

    datareader对象提供只读单向数据的快速传递,单向:您只能依次读取下一条数据;只读:DataReader中的数据是只读的,不能修改;相对地,DataSet中的数据可以任意读取和修改 01.usi ...

  7. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  8. jsonp 跨域1

    今天上课学到了jsonp,看了理解,还需要多敲,代码贴出来看看 <!doctype html> <html> <head> <meta charset=&qu ...

  9. Amaze UI 发布基于jQuery新版本v2.0.0之web组件

    首先Amaze Ui第一版时我收到邮件邀请去试用,去了官网看了下,是基于zepto.js的一个类似bootstrap的响应式框架,提到框架当然是好事,快速开发呗.这词2.0的弃用zepto.js改用j ...

  10. 纪念第一次ak。。。

    1.MM的数学作业 [题目大意] 今天,MM在上数学课,数学课的主题是函数.讲完以后老师留了一个家庭作业,让同学们回家思考.题目如下: 定义一个函数,F(x)表示x转成二进制后,二进制中“1”的个数. ...