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 = ...
随机推荐
- SQL 插入多行数据语句整理
参考别人的,希望对大家有用. 1.只是插入简单的有限行数据时用: insert 要插入的表名(列名1,列名2,....) select '列名1需要的数据','列名2需要的数据',... union ...
- Cocos2dx-Lua UIScrollView 和 UITableView 对比
为什么写这个 上面这个问题的答案也是我写这篇文章的初衷,在最近给游戏添加一些列表的时候,对比着应用了一下他们两个,在它们两个之间的优劣势之间进行取舍,就有了这个问题的答案. 按照我一个iOS开发而言, ...
- hdu6059（ Trie ）
hdu6059 题意 给定数组 \(A\) ,问有多少对下标 \((i, j, k)\) 满足 \(i < j < k\) 且 \((A[i] \ xor \ A[j]) < (A[ ...
- python sql语句封装连接mysql
进行了代码优化,欢迎评审 #!/usr/bin/python # -*- coding:utf-8 -*- import logging logging.basicConfig(level=loggi ...
- 5.7（java学习笔记）Vector、Enumeration
一.Vector Vector类实现一个可扩展的数组对象.与数组一样,它包含可以使用整数索引访问. 它的基本操作方法add(int index, E element),get(int index),i ...
- Linux防止“rm -rf /”误删除
说明:不解释了,运维应该在每台服务器都去配置这个问题以减少灾难的发生 方法: 1.safe-rm safe-rm是一个开源软件用来替代不太安全的rm,可以在/etc/safe-rm.conf中配置路径 ...
- SQL Server on Linux: How? Introduction: SQL Server Blog
SQL Server Blog Official News from Microsoft’s Information Platform https://blogs.technet.microsoft. ...
- 如何设断点？？？？-----使用WinDbg调试SQL Server查询
http://www.cnblogs.com/woodytu/p/4665427.html http://www.sqlservercentral.com/blogs/aschenbrenner/20 ...
- Oracle Linux 7.3下载与 dtrace安装
https://docs.oracle.com/cd/E52668_01/E86280/html/section_edm_dvp_hz.html http://www.oracle.com/techn ...
- CSS3：box-sizing 怪异盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...