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 = ...
随机推荐
- Yii2中如何访问controller的二级目录下的控制器
Yii2默认的控制器下只有一层目录放在controller目录下,当开发的需要的时候需要在该目录下面新增一层目录也就是在controller下增加二级目录,比如controller/api/Membe ...
- secureCRT的自动登录设置
具体设置的步骤如下: 1. 打scrt,创建一个新的回话 2. 右击该回话选择属性,定位到左边选项卡的登录动作 3. 第一行:预期是$; 发送是ssh username@machine name 第二 ...
- Spark部署及应用
在飞速发展的云计算大数据时代,Spark是继Hadoop之后,成为替代Hadoop的下一代云计算大数据核心技术,目前Spark已经构建了自己的整个大数据处理生态系统,如流处理.图技术.机器学习.NoS ...
- [orangehrm] 安装问题集合
Web server allows .htaccess files # 这一项检查不通过 解决: In conf/extra/httpd-vhosts.conf, add the line Allow ...
- C# 用程序读写另一个控制台程序
一. using System; namespace ConsoleApp1 { class Program { static void Main(string[] args) { Console.W ...
- 如何用java有选择的输入多行文本
java如何有选择的输入多行文本 今天在做作业的时候碰到了一个问题:要用java做词频统计,但是这就犯难了,java如何有选择性的进行文件输入输出呢? 查阅文档可知,inputStream类和outp ...
- RPD Volume 172 Issue 1-3 December 2016 评论02
Introduction to the special issue of Radiation Protection Dosimetry This special issue is a collecti ...
- JMeter之分布式部署
转自:http://www.cnblogs.com/yangxia-test/p/4016277.html Jmeter 是Java 应用,对于CPU和内存的消耗比较大,因此,当需要模拟数以千计的并发 ...
- APIO2017伪题解
题目质量还是比较高的,只是当时澳大利亚方面出了一点问题?最后造成了区分度非常迷的局面. 纵观三道题,T1是披着交互外衣的提答题,T2是披着交互外衣的传统题,T3是一道据说近年来APIO最水的一道传统题 ...
- OpenWrt 路由器过滤广告的N种方法
路由器已经成为每个家庭不可缺少的角色,手机.电脑.电视,凡是需要互联网的设备都要用到它.那么路由器除了给我们的网络设备分发网络外,还有其他用途吗? 现在很多人家里都用着智能路由器,智能路由器究竟怎么智 ...