jQuery 文档操作 - insertAfter() ，insertBefore()，after()，before() 方法
这个方法跟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() 方法的更多相关文章
- jQuery 文档操作之prepend() 和prependTo()方法.
//prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 前端之JQuery：JQuery文档操作
jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- jQuery文档操作--append()、prepend()、after()和before()
append(content|fn) 概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数 content 要追 ...
- jQuery 文档操作
一.插入操作 1. 父元素.append(子元素) 追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素 var oli = ...
随机推荐
- 编译opencv有关cuda的代码
opencv3.2提供了cuda很好的支持,cuda的opencv接口,让用户想使用opencv那样去使用cuda,不用写cuda代码 一开始编译opencv有关cuda的代码,opencv 里sam ...
- BMP文件组成
BMP文件组成 BMP文件由文件头.位图信息头.颜色信息和图形数据四部分组成. 如图: 位图文件头BITMAPFILEHEADER 位图信息头BITMAPINFOHEADER 调色板Palette 实 ...
- hdu5737
首先思考一个朴素的做法 将b[]维护成一个线段树套有序表,每次修改a[]用线段树+lazy tag 并在线段树的子区间上在有序表中二分更新这段区间中a[i]>=b[i]的值,复杂度O(nlog^ ...
- C# 对话框使用大全
对话框中我们常用了以下几种:1.文件对话框(FileDialog) 它又常用到两个: 打开文件对话框(OpenFileDialog) 保存文件对话(SaveFileDialog)2.字体对话框(Fon ...
- MySQL插入中文数据报错
在操作数据库插入中文会出现如下错误: ERROR 1366 (HY000): Incorrect string value: '\xC4\xE3\xBA\xC3' for column 'userna ...
- 从1到整数n中1出现的次数
题目:输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1,10,11和12共出现了5次. 不考虑时间效率的解法: int Numbe ...
- [orangehrm] 安装问题集合
Web server allows .htaccess files # 这一项检查不通过 解决: In conf/extra/httpd-vhosts.conf, add the line Allow ...
- tomcat的环境配置
针对java8 选择tomcat进行配置 Tomcat 环境变量配置: 下载:http://tomcat.apache.org/download-80.cgi 解压后直接copy到C盘,这是免安装版本 ...
- F - Oil Deposits 【地图型BFS+联通性】
The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. GeoSu ...
- Android学习--探究服务(一)
什么是服务? 服务(service)是Android中实现程序后台运行的解决方案,它非常适合去执行那些不需要和用户交互而且还要求长期运行的任务.服务的运行不依赖任何的用户界面,即使应用被切换到后台或者 ...