举例说明,原始html代码如下:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

1、prepend(在被选元素的开头插入元素)

$("ol").prepend("<li>Prepend item</li>");

得到:

<ol>
<li>Prepend item</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

2、append(在被选元素的结尾插入元素)

$("ol").append("<li>Append item</li>");

得到:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>Append item</li>
</ol>

3、before(在被选元素之前插入内容)

$("ol").before("<b>Before</b>");

得到:

<b>Before</b>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

4、after(在被选元素之后插入内容)

$("ol").after("<i>After</i>");

得到:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<i>After</i>

jQuery-prepend、append、before、after的区别的更多相关文章

  1. JQuery之append和appendTo的区别,还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  2. jQuery parent.append和$after的区别

    首先假设我们有个id为test的div和一个id为test2的div: <div id="test">     我是测试div </div> <div ...

  3. jQuery中append()与appendTo()方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  4. jquery中 append 和appendto的区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  5. jquery中append与appendTo方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  6. jquery中append、prepend, before和after方法的区别(一)

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

  7. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  8. before(),after(),prepend(),append()等新DOM方法简介

    一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...

  9. jQuery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...

  10. javascrit原生实现jquery的append()函数

    /** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) ...

随机推荐

  1. python中各种转义字符

    转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \’ 单引号 \” 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制表符 \t 横向制 ...

  2. C语言中typedef的解释_1

    typedef是在计算机编程语言中用来为复杂的声明定义简单的别名,它与宏定义有些差异. 它本身是一种存储类的关键字,与auto.extern.mutable.static.register等关键字不能 ...

  3. PowerShell命令部署WSP

    转载:http://www.cnblogs.com/ChunLiangZhang/archive/2012/07/18/2597335.html(作者:ChunLiang) 现在可以用SharePoi ...

  4. Codeforces Round #316 (Div. 2) A

    Description The country of Byalechinsk is running elections involving n candidates. The country cons ...

  5. SQL全文搜索引擎 Sphinx

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索, 它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索.   Sphinx特别 ...

  6. SQL Connect By 的例子

    看到一个较为通俗易懂的connect by的例子,是百度知道的答案,稍微整理了一下.我自己这样理解:connect by prior "id" = "p_id" ...

  7. Spring Boot学习资料汇总

    1. SpringFramework 重点学习 IOC容器,Web MVC framework,AOP 等    官网文档  http://docs.spring.io/spring/docs/cur ...

  8. EF上下文容器,保存线程唯一性

    在工作中有个疑问,就是EF上下文容器到底创建了多少个? 在asp.net中,EF上下文容器.如果只要有一个,则每次一个用户访问,添加一些实体,然后又不会自动销毁,就会造成内存爆炸.如果每次创建一个,则 ...

  9. js Form表单转json格式,及后台接收(多种方法)

    转载:https://blog.csdn.net/qq_40138785/article/details/81533015 一.serialize()方法格式:var data = $("# ...

  10. oracle service name connect

    oracle service name connect dest_ip=100.100.100.100 dest_port= dest_dbname=server_name connect=" ...