举例说明,原始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. Django工程创建

    方法一: 1.win+r进入cmd命令窗口: 2.找到Django的安装地址: 3.cmd窗口中利用cd 进入相应的文件夹,再输入命令如下: django-admin.exe startproject ...

  2. sublime 显示 python 错误信息

    默认的编译器可以直接按Ctrl+B编译运行Python,并在控制台输出结果.美中不足的是无法输出中文,需要自己手动配置一番. 在Sublime Text 3 中依次点击菜单Tools->buil ...

  3. 使用nexus 搭建本地 maven 服务器

    1.下载安装nexus oos https://www.sonatype.com/download-oss-sonatype ,选择2.x 版本. 2. 配置maven <server> ...

  4. JAVA第一个程序hello world

    import java.util.Scanner; public class hello { public static void main(String[] args) { System.out.p ...

  5. Spring Boot中JPA如何实现按日期合计

    1. 用queryDsl方法 JPAQueryFactory.select( Projections.fields(OrderCountByDayBean.class, qOrder.amount.s ...

  6. webAPI过滤器添加参数签名

    项目需求: 接口对安卓和IOS开发接口,需要房子用户窜改数据请求接口.添加sign签名校验参数. 代码如下:加上特性标签就可以控制部分接口验证 public class SignAuthorizeFi ...

  7. Java升级替换java version "1.5.0"

    首先进行java安装 http://www.cnblogs.com/someone9/p/8670585.html 2. 然后查看版本信息,仍然是1.5.0 [root@OKC java]# java ...

  8. 转载 Some indexes or index [sub]partitions of table VAS.TAB_PUB_CALLLOG have been marked unusable

    http://www.xifenfei.com/2011/12/some-indexes-or-index-subpartitions-of-table-vas-tab_pub_calllog-hav ...

  9. ORA-12012 ORA-20001 on ORACLE 12C (2420581.1)

    Oracle数据库 - 企业版 - 12.2.0.1及更高版本本文档中的信息适用于任何平台.   Doc ID 2420581.1 症状 在容器数据库中,警报日志中会显示以下错误: ORA-12012 ...

  10. vue--钩子函数1

    最近在学习自定义指令,这里做个整理 vue允许注册自定义指令,在2.0中,代码复用和抽象的主要形式是组件.然而有的情况下仍需要对普通DOM元素进行底层操作,这时就会用到自定义指令. 全局指令direc ...