这个方法跟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. 解决 WP迁移后出现的404错误

    项目迁移 WordPress 后仅首页正常,其它页面全部 404.时隔一年,再度遇到这问题,总结和梳理一下. 1.想办法登录后台,刷新一次“设置”中的“固定链接”.比如换成默认后保存,再设回原先设置并 ...

  2. 《深入理解Java虚拟机》学习笔记

    <深入理解Java虚拟机>学习笔记 一.走近Java JDK(Java Development Kit):包含Java程序设计语言,Java虚拟机,JavaAPI,是用于支持 Java 程 ...

  3. Linux API的fork()测试

    现在到docker的实施阶段, 其底层的namespace,cgroup应该深入了解了. 其调用的API也慢慢熟悉起来吧. #include <unistd.h> #include < ...

  4. VisualStudio 2013开发Office插件

    在VS中选择创建新项目,选择App for Office 选择mail出现的位置 Task pane The app appears in the task pane of a Microsift O ...

  5. POJ 1236 Network Of Schools (强连通分量缩点求出度为0的和入度为0的分量个数）

    Network of Schools A number of schools are connected to a computer network. Agreements have been dev ...

  6. 【置换群】Codeforces Round #393 (Div. 1) A. Pavel and barbecue

    就是先看排列p,必须满足其是一个环,才满足题意.就处理出有几个环,然后把它们合起来,答案就是多少. 然后再看序列b,自己稍微画一画就会发现,如果有偶数个1肯定是不行哒,否则,它就会再置换一圈回到它自己 ...

  7. 【二分答案】【分块答案】【字符串哈希】【set】bzoj2946 [Poi2000]公共串

    我们二分/分块枚举答案x,暴力把除了最短的字符串以外的其他字符串的x长度子串哈希搞出来,分别扔到set里. 然后暴力枚举最短的字符串的x长度字串,查看是否在全部的set里出现过. #include&l ...

  8. 动态OSPF配置路由表

    动态ospf设置路由表 以Rourer1为例子 (1)首先设置路由器端口ip Router(config)#inter f0/0 Router(config-if)#ip add 192.168.1. ...

  9. CHBTC

    蛙人高频交易拆单策略-带手续费拆单策略及原理说明 - 王宇 warensoft - 博客园 CHBTC

  10. [转] 利用Matlab提取图片中曲线数据

    原文地址 网易博客 前一段时间看到一篇文章"利用Matlab提取图图片中的数据",觉得思路挺好,遂下载下来研究了一番,发现作者所编写的程序没有考虑原始图片非水 平放置的情况,而实际 ...