这个方法跟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. maven编译生成的jar包运行出现 "Failed to load Main-Class manifest attribute from"

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  2. 【转】Ubuntu 14.04.3上配置并成功编译Android 6.0 r1源码

    http://www.linuxidc.com/Linux/2016-01/127292.htm 终于成功把Android 6.0 r1源码的源码编译.先上图,这是在Ubuntu中运行的Android ...

  3. STL模板整理 map

    map容器: 继上一篇 ,Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能 ...

  4. 【搜索】魔板问题(BFS)

    [搜索]魔板问题 时间限制: 1 Sec  内存限制: 64 MB提交: 5  解决: 3[提交][状态][讨论版] 题目描述 据说能使持有者成为世界之主的上古神器隐藏在魔板空间,魔板由8个同样大小的 ...

  5. POJ3026 Borg Maze(Prim)(BFS)

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12729   Accepted: 4153 Descri ...

  6. IDEA的Maven项目找不到class

  7. [xsy1294]sub

    给出一棵$N$个节点的无根树,节点$i$有权值$v_i$.现在有$M$次操作,操作有如下两种: $1\ x\ y$ 将节点$x$的权值$v_x$修改为$y$ $2$ 选择一个联通块(也可以不选择),使 ...

  8. 【权值分块】bzoj3570 DZY Loves Physics I

    以下部分来自:http://www.cnblogs.com/zhuohan123/p/3726306.html 此证明有误. DZY系列. 这题首先是几个性质: 1.所有球质量相同,碰撞直接交换速度, ...

  9. 【莫比乌斯反演】BZOJ2920-YY的GCD

    [题目大意] 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对. [思路] 太神了这道题……蒟蒻只能放放题解:戳,明早再过来看看 ...

  10. JDBC 操作数据库

    jdbc: package org.java.dao; import java.sql.Connection; import java.sql.DriverManager; import java.s ...