jQuery 追加元素的方法如append、prepend、before

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() 方法在被选元素之前插入内容。

演示代码：

<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结构图

赞 (0)

相关推荐

  • jquery 元素控制(追加元素/追加内容)介绍及应用

    一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: 复制代码 代码如下: <div id="content"> <p>在我的后面追加一条新闻</p> </div> Javascript: 复制代码 代码如下: <script type="text/javascript"> jQuery(function(){ //在元素内部追加内

  • Jquery元素追加和删除的实现方法

    介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法. 2.HTML-DOM 在使用Javascript和DO

  • jquery 操作日期、星期、元素的追加的实现代码

    jquery 操作日期、星期、元素的追加的实现代码

    复制代码 代码如下: <script language="javascript" > $(document).ready(function(){ function show(){ var mydate=new Date(); var str = "" + mydate.getFullYear() + "年"; str += (mydate.getMonth() + 1) + "月"; str += mydate.g

  • jQuery 追加元素的方法如append、prepend、before

    jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 $("p").append("Some appended text."); 2.jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容. 实例 $("p").prepend("Some prepended text."); 3.after() 和 before() 方法

  • jquery 追加元素append、prepend、before、after用法与区别分析

    jquery 追加元素append、prepend、before、after用法与区别分析

    一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去:     如:A.after(B)的意思是将B放到A后面去:     before()--其方法是将方法里面的参数添加到jquery对象前面去.     如:A.before(B)的意思是将A放到B前面去:    二.insertAfter()和insertBefore()的方法的区别 其实是将元素对调位置:     可以是页面上已有元素:也可以是动态添加进来的元素.    

  • Python list append方法之给列表追加元素

    Python list append方法之给列表追加元素

    目录 Python list append方法给列表追加元素 描述 语法 举例 注意事项 给列表list中元素添加的四种方式 1. append() 2. extend() 3. insert(index,value) 4.“+”号 Python list append方法给列表追加元素 描述 append函数可以在列表的末尾添加新的对象.函数无返回值,但是会修改列表. 语法 list.append(object) 名称 说明 备注 list 待添加元素的列表   object 将要给列表中添加

  • jQuery和JavaScript节点插入元素的方法对比

    jQuery和JavaScript节点插入元素的方法对比

    二.插入元素: <div> <p>面朝大海,春暖花开</p> </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 append() 向每个匹配的元素内部追加内容 appendTo() 把所有的元素追加到另一个指定的元素集合中,实际上是颠倒了append()的用法.如$(A).append(B)与$(B).appendto(A)是等价的 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置到另一个

  • jQuery 添加元素和删除元素的方法

    添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部). $("p").append("追加文本"); jQuery prepend()

  • jQuery操作元素追加内容示例

    本文实例讲述了jQuery操作元素追加内容.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作文档结构</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type

  • python追加元素到列表的方法

    本文实例讲述了python追加元素到列表的方法.分享给大家供大家参考.具体实现方法如下: scores = ["1","2","3"] # add a score score = int(raw_input("What score did you get?: ")) scores.append(score) # list high-score table for score in scores: print score 运行结

  • jquery增加和删除元素的方法

    jquery增加和删除元素的方法

    本文实例讲述了jquery增加和删除元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery增加删除元素</title> <script type="text/javascript&

  • jQuery给元素添加样式的方法详解

    本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

随机推荐