这个方法跟prependTo()和appendTo()不一样的地方在于，一个是仍然插入到元素内部，而insertAfter和insertBefore是插入到元素外部。

这里拿insertBefore来作为例子说一下：

使用方法：

第一种方法：插入代码：

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("<span>你好！</span>").insertAfter("p");

  });

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

<button>在每个 p 元素之后插入 span 元素</button>

</body>

</html>

插入前：

插入后：

第二种方法：插入已有的元素

会把已有的元素取出来，插入到特定元素的指定位置。

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("h1").insertAfter("p");

  });

});

</script>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

<button>在每个 p 元素之后插入 h1 元素</button>

</body>

</html>

插入前：

插入后：

会发现，已有的元素在原来的位置消失了，而被复制，插入到特定位置上了。

after() 方法和before() 方法与insertAfter和insertBefore类似，不过使用方式不一样。

例子：

$("button").click(function(){

  $("p").before("<p>Hello world!</p>");

});

jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法的更多相关文章

  1. jQuery 文档操作之prepend() 和prependTo()方法.

    //prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...

  2. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  3. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  4. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  5. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  6. 前端之JQuery：JQuery文档操作

    jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...

  7. jQuery 文档操作 - prependTo() ，appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  8. jQuery文档操作--append()、prepend()、after()和before()

       append(content|fn)  概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数    content  要追 ...

  9. jQuery 文档操作

    一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...

随机推荐

  1. Corosync 配置描述

    NAME corosync.conf - corosync executive configuration file SYNOPSIS /etc/corosync/corosync.conf DESC ...

  2. （十六）MySQL集群galera实现

    (1)环境介绍 galera官网:http://galeracluster.com/downloads/ # cat /etc/redhat-release CentOS Linux release ...

  3. [mysql] 表去重

    select *, count(distinct content) from comment2 group by content

  4. Codeforces 855C - Helga Hufflepuff's Cup

    855C - Helga Hufflepuff's Cup 题意 要求构建一棵树,树上至多可以存在 \(x\) 个权值为 \(k\) 的重要点,且与重要点连边的点的权值必须小于 \(k\),问有多少种 ...

  5. 洛谷——P1327 数列排序

    P1327 数列排序 题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入输出格式 输入格式: ...

  6. MySQL 一张表中两个字段值互换

    update table a, table b set a.filed1= b.field2, a.field2= b.field1where a.id = b.id

  7. [JOISC2017]細長い屋敷

    题目大意: $n(n\le5\times10^5)$个房间排成一排,相邻两个房间之间有一扇门,第$i$个房间和第$i+1$个房间之间的门可以用第$c_i$种钥匙打开(可能有多个门可以用同一种钥匙打开) ...

  8. @requestBody注解的使用（下）

    提示: 建议一定要看后面的@RequestBody的核心逻辑源码以及六个重要结论!本文前半部分的内容都是一些基本知识常          识,可选择性跳过. 说明: @RequestBody主要用来接 ...

  9. Android开发工具

    Android开发工具: AndroidDevTools: 收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Android设计规范,免费的设计素材等. ...

  10. JAVA EE 学习笔记

    http://www.cnblogs.com/kuangdaoyizhimei/category/701794.html http://www.cnblogs.com/liunanjava/p/445 ...