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函数是一样,只不过它们的写法是反着来写的而已
备注:before函数与after函数相反,表示是元素的前面加入指定元素
1、after函数
定义和用法:
after() 方法在被选元素后插入指定的内容。参考:http://keleyi.com/a/bjac/cfyxd60g.htm
语法:
$(selector).after(content)
实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13.htm
实例代码:
<html> <head> <title>jquery的after函数实例-柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <style> .yuanlai_keleyi_com{border:1px solid black;padding:5px} .a_keleyi_com{color:Blue;} a{color:Blue} </style> </head> <body> <br /> <span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a></span> <br /> <br /><button id="after_keleyi_com">after函数</button><br /><br /> <a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a> <script type="text/javascript"> $("#after_ke"+"leyi_com").click(function () { $("span").after('<a href="http://keley'+'i.com" class="a_kel'+'eyi_com">这是after函数加上去的内容</a>') }) </script> </body> </html>
结果如下:
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a></span><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a>
即:span标签后面多了一个a标签
2、append函数
定义和用法:
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。参考:http://keleyi.com/a/bjac/0vpch15n.htm
语法:
$(selector).append(content)
实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13a.htm
实例代码:
<html> <head> <title>jquery的append函数实例-柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <style> .yuanlai_keleyi_com{border:1px solid black;padding:5px} .a_keleyi_com{color:Blue;} a{color:Blue} </style> </head> <body> <br /> <span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span> <br /> <br /><button id="after_keleyi_com">append函数</button><br /><br /> <a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a> <script type="text/javascript"> $("#after_ke" + "leyi_com").click(function () { $(".yuanlai_ke"+"leyi_com").append('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是append函数加上去的内容</a>') }) </script> </body> </html>
结果如下:
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a></span>
即:span标签里面多了一个a标签
3、appendTo函数
定义和用法:
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。参考:http://keleyi.com/a/bjac/opnw2awa.htm
语法:
$(content).appendTo(selector)
实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13b.htm
实例代码:
<html> <head> <title>jquery的appendTo函数实例-柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <style> .yuanlai_keleyi_com{border:1px solid black;padding:5px} a{color:Blue} .a_keleyi_com{color:Blue;} </style> </head> <body> <br /> <span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span> <br /> <br /><button id="after_keleyi_com">appendTo函数</button> <br /><br /> <a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> <script type="text/javascript"> $("#after_ke" + "leyi_com").click(function () { $('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容</a>').appendTo(".yuanlai_k" + "eleyi_com") //这样的写法是不正确的: $(".yuanlai_k" + "eleyi_com").appendTo('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容</a>') }) </script> </body> </html>
结果如下:
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a></span>
即:span标签里面多了一个a标签
效果和append函数是一样,只不过它们的写法是反着来写的而已
appendTo函数的一个实际应用:http://keleyi.com/a/bjac/jp71q5jt.htm
jquery after append appendTo三个函数的区别相关推荐
- after、append和appendTo三个函数的区别
jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...
- php怎么输出3个函数和,PHP利用var_dump,var_export,print_r三个函数的区别示例
感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧!下面的示例看看这三个函数的具体的区别,其中var_dump和var_export比较少用,但他们两者又很相似.所以可以看看: 代码如下: /* 5 ...
- jQuery height()、innerHeight()、outerHeight()函数的区别详解
参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): 1 <!DOCTYPE html> 2 <html lan ...
- CListCtrl控件的InsertItem和SetItemText和SetItem三个函数的区别
CListCtrl控件的InsertItem和SetItemText和SetItem三个函数的区别 分类: vc 2013-03-17 08:21 1548人阅读 评论(0) 收藏 举报 本人 ...
- TransparentBlt、StretchBlt与BitBlt三个函数的区别
TransparentBlt.StretchBlt与BitBlt三个函数的区别 BOOL StretchBlt( int x, //指定目的矩形区域左上角的X坐标 int y, //指定目的矩形区 ...
- isdigit()、isalpha()、isalnum() 三个函数的区别和注意点
一.isdigit() python关于 isdigit() 内置函数的官方定义:S.isdigit() -> bool Return True if all characters in S a ...
- python:isdigit()、isalpha()、isalnum() 三个函数的区别和注意点
一.isdigit() python关于 isdigit() 内置函数的官方定义: S.isdigit() -> bool Return True if all characters in S ...
- html中prependid的作用,jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素的方法有append(),prepend和 after(),before()两种共四个.但很多人对他们的使用有点混淆,今天就来分析一下.append()和prepend()的 ...
- controller 用 map 接收值_一文弄懂apply、map和applymap三种函数的区别
CDA数据分析师 出品 在日常处理数据的过程中,会经常遇到这样的情况,对一个DataFrame进行逐行.逐列或者逐元素的操作,很多小伙伴也知道需要用到apply.map或者applymap,但是具体什 ...
最新文章
- linux规则及别名设置
- centos增加软连接
- 听说你开发.NET还在用VS,小哥哥给你推荐全平台的Rider
- 审计利用计算机,利用计算机审计手段 提高审计工作水平
- python输入姓名_Python 用户输入用户名,进行验证
- mescroll.js 的下拉刷新和上拉加载 tab切换
- 看大师讲解移动互联网前端开发流程
- jQuery获取浏览器语言
- MATLAB数值分析学习笔记:线性最小二乘回归
- 交通信号灯课程设计_交通信号灯可以教设计师什么
- DeepStream 快速入门
- 找出知晓秘密的所有专家(leetcode 2092)
- ThinkPad 插电时电源指示灯不亮
- 【企业】如何将零和博弈转换为正和博弈
- 我是怎样“诱骗”漂亮女孩的(下)[转载]
- python 使用 numpy 判断两个向量是否平行
- 高等代数-三阶特征根、特征向量求解详细过程
- 两种开源聊天机器人的性能测试(一)——ChatterBot
- element 日期选择器
- Hibernate 错误记录Connections could not be acquired from the underlying database!
热门文章
- 【C 语言】数组 ( 多维数组操作模型 | 取某个数组元素地址 | 取某个数组元素值 )
- 【每日随笔】使用 you-get 获取网页中的视频资源 ( Python 环境安装 | you-get 工具使用 )
- 【组合数学】指数生成函数 ( 指数生成函数求解多重集排列示例 )
- Android Studio NDK 代码 Source Insight调试 (NDK 目前开发方案 | NDK 编译 | 导入 so 库 | 项目编码转换)
- MySQL 5.7 create VIEW or FUNCTION or PROCEDURE
- Mac启动时:boot task failed:fsck-safe处理办法
- java内存模型之一
- postman测试传入json
- VS2005+WINDDK+Driver Studio 3.2编译出第一个测试驱动程序
- JS--切换图片总结