jquery after append appendTo三个函数的区别
jq文档的说明是
1、after函数
定义和用法：
after() 方法在被选元素后插入指定的内容。
语法：
$(selector).after(content)
实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("button").click(function(){
$("span").after("<a href="#">ddddd</a>")
})
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下：
<span>aaaaaaaaaaaaaaa</span>
<a href="#">ddddd</a>
span标签后面多了一个a标签
2、append函数
定义和用法：
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
语法：
$(selector).append(content)
实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("button").click(function(){
$("span").append("<a href="#">ddddd</a>")
})
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下：
<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签
3、appendTo函数
定义和用法：
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
语法：
$(content).appendTo(selector)实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$().ready(function(){
$("button").click(function(){
// $("span").appendTo("<a href="#">ddddd</a>"),这样的写法是不正确的
$("<a href="#">ddddd</a>").appendTo("span")
})
})
</script>
</head>
<body>
<span>aaaaaaaaaaaaaaa</span>
<button>after函数</button>
</body>
</html>
结果如下：
<span>aaaaaaaaaaaaaaa<a href="#">ddddd</a></span>
span标签里面多了一个a标签
效果和append函数是一样，只不过它们的写法是反着来写的而已
jquery after append appendTo三个函数的区别的更多相关文章
- jquery：after append appendTo三个函数的区别
1.查找元素节点 var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 2.查找元素属性 利用jq ...
- after、append和appendTo三个函数的区别
jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html>&l ...
- 前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- jQuery height()、innerHeight()、outerHeight()函数的区别详解
参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...
- jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...
- jquery源码分析(三)——工具函数
jQuery.extend({ expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "&quo ...
- jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- （转）jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- jq查找父类元素三个函数的区别
parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...
随机推荐
- 优化PHP程序的方法(温故知新)
1. If a method c++an be static, declare it static. Speed improvement is by a factor of 4. 如果一个方法可静态化 ...
- 【C++】递增递减操作符与指针的关系
可以将递增与递减操作符用于指针和基本变量,将递增操作符用于指针时,将把指针的值增加其指向的数据类型占用的字节数,这种规则适用于对指针递增和递减. int arr[5] = {21,32,23,45,3 ...
- Python命令 （if __name__=="__main__":）
1. 语法 1.以#号开头的语句是注释 2.请务必注意,Python程序是大小写敏感的,如果写错了大小写,程序会报错. 3.按照约定俗成的管理,应该始终坚持使用4个空格的缩进. 4.当语句以冒号:结尾 ...
- flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
- Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- css3常用标签
30个最常用css选择器解析 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器 ...
- VVDocumenter升级后不能使用问题
VVDocumenter-Xcode是Xcode上一款快速添加标准注释,并可以自动生成文档的插件.有了VVDocumenter-Xcode,规范化的注释,只需要输入三个斜线“///”就可以搞定,非常方 ...
- iOS跳转到另一个程序
我这里只是写了部分东西,如果想看更加详细的,请点击原文链接. 原文链接:http://blog.csdn.net/likendsl/article/details/7553605 原则上iOS的沙 ...
- $state.go页面不刷新数据
http://blog.csdn.net/WenJimmy/article/details/51027952 假如进入market/beian/add添加数据,保存提交后回退market/beian列 ...
- Sqli-LABS通关笔录-14
这一节让我学习到了 1.extractvalue函数(该函数用于对xml文件进行查询和修改,于此相关的还有一个叫“updatexml”函数) 语法:extractvalue(XML_document, ...