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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决