jQuery中after和insertAfter方法

最新推荐文章于 2024-07-21 02:50:13 发布
最新推荐文章于 2024-07-21 02:50:13 发布
阅读量555 收藏
点赞数 1
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DangerousMc/article/details/102991650
版权

在jQuery中标签所显示的内容是可以叠加的，如after()方法和insertAfter()方法都是用来在标签内的尾部添加内容，但二者的区别在于，after()方法是在标签外的尾部添加内容，而insertAfter()方法是将内容添加到目标标签外的尾部的，这也是这两个方法与append()和appendTo()的区别： jQuery中append与appendTo方法

以下是代码示例：

首先使用id选择器获取id名为love的span标签，然后调用after()方法将i标签中的内容接在span标签后面；

第15行用id选择器获取id名为letters的被连接的span标签，然后调用insertAfter()方法，将其接在id名为content的span标签后面

注意：insertAfter()方法只能将文档中已有的标签中的内容接在目标标签上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span id="love">我爱</span>
		<br />
		<i id="letters">你</i>
		<span id="content">我爱</span>
		<script>
			$("#love").after("<i>你</i>")
			$("#letters").insertAfter("#content");
		</script>
	</body>
</html>

AnFooo
关注
专栏目录
jQuery—添加DOM节点之after方法与insertAfter()
Kiwi_no的博客
11-09 485
after(content|fn) ：向每个匹配的元素后插入内容； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script&...
jQuery中append、insertBefore、after与insertAfter方法注意事项
10-28
在使用jQuery进行DOM操作时，append、prepend、before和after方法是经常使用的，它们可以帮助开发者以不同的方式动态地修改页面内容。同时，appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...
【jQuery】after()与insertAfter()
景谦Nice的博客
11-28 240
after()：向每个匹配的元素后插入内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>after()</title> <script src="js/jquery-3.3.1.js"></script> &lt...
jquery中修改伪元素after样式
最新发布
weixin_30002803的博客
07-21 120
jQuery中修改伪元素after样式 作为一名经验丰富的开发者，我很高兴能够分享一些关于如何使用jQuery修改伪元素after样式的知识。伪元素after在CSS中用于在元素内容的后面添加内容，比如图片、文字等。在jQuery中，我们可以通过操作DOM元素来实现这一点。 步骤流程 以下是实现“jQuery中修改伪元素a...
jQuery after() 和 insertafter()
qq_44971038的博客
11-29 215
两种方法均是在指定标签之后添加新的标签，和append()显示的效果很接近，append()是标签内末尾添加；这两种是标签外后面添加； after() <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <scrip...
jquery的insertBefore(),insertAfter(),after(),before()
black-heart的专栏
06-19 1106
insertBefore():a.insertBefore(b) 　　　　　　　a在前，b在后, 　　　　　　　a：是一个选择器，b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> &...
jquery的after与insertAfter的区别
热门推荐
风柏杨的技术博客
01-11 1万+
jquery的dom操作方法中，包括了after与insertAfter，这两个方法名字相近，所实现的功能从名字中不容易分辨，所以在经过试验后撰文一篇以加深记忆。 测试代码如下： 测试insertAfter与after的区别 first middle last 自然状态下显示是这样的：        
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
10-21
jQuery提供了几种方法来实现这些功能，其中包括insertBefore(), insertAfter(), after(), 以及before()。这些方法虽然名字相似，但各自有不同的用途和行为，下面将详细介绍它们之间的区别。 首先，我们要了解的是...
jQuery中after的两种用法实例
10-27
总结来说，`after()`方法是jQuery中的一个重要工具，它帮助开发者轻松地在DOM结构中添加内容，提升网页的动态效果和用户体验。无论是简单的文本插入还是复杂的动态生成内容，`after()`都能提供高效且灵活的解决方案...
jQuery中after与insertAfter
S_Tian的博客
12-01 310
after(content|fn) ：向每个匹配的元素后插入内容。 insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面。 <body> <span id="before">Hello</span> <script> $("#before").after("<i>World</i>"); ...
jQuery中after、insertAfter的区别和用法
徐冰的博客
11-09 1210
一、after()方法： after(content|fn) ：向每个匹配的元素后插入内容。 html代码如下： <span id="content">I love </span> jQuery代码如下： <script> $("#content").after("<span>you.</span>");//after:在标签的外部插...
jQuery中after和insertafter方法
myy_llc的博客
11-09 192
外部插入： after(content|fn) ：向每个匹配的元素后插入内容； insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面； 代码如下： after: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></ti...
JQuery中的after与insertAfter
qiangzhogshou的博客
11-29 113
一、after <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <span id="tes...
jQuery中after与insertAfter的区别
wangdada___的博客
11-09 194
after(content|fn) ：向每个匹配的元素后插入内容 //外部插入 a.insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面；//外部插入，不是复制是直接移位。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl...
jQuery解读之after
笔心
04-14 2994
一般通过实例去学习jQuery的同学在用过一段时间后往往会感觉jQuery很简单，不用花费太多精力去系统的学，边用边学就行，其实不然，不花时间系统的学习下jQuery的API，就很难真正掌握jQuery，也不能达到灵活运用的地步。我们知道jQuery中对于DOM的操作有很多方法是类似的，如果不去了解其区别，或者不去了解其运用环境，那么在实际运用中就会出现问题。针对jQuery中的一些容易被忽视的地
after()与insertAfter()实例
行天之路
11-14 1415
在jquery中，after()与insertAfter()函数有着相同的功能，能够完成相同的任务，即添加文本或者html内容到匹配元素的后面，其主要的区别在于语法上的区别。   例如： divclass="greyBox">I'm a ipman/div> divclass="greyBox">I'm a ipman 2/div> 1. $(‘selector’).after(
jQuery after( ) 方法
m0_57835615的博客
06-12 2029
通过jQuery的 after( ) 方法，我们可以在被选元素之后插入指定的内容。 语法格式： $(selector).after(content,function(index)) 参数：
jQuery的after()与insertAfter()
qq_41083450的博客
11-09 176
外部插入 把未有的插入 <i id="letters">you</i> <script> $("#letters").after("<span>I love </span>"); <script> 把已有的元素插入 <i id="letters">you</i> <...
jQuery中的after（）方法和insertafter（）方法
weixin_45104211的博客
11-09 363
一、总结（外部插入） after(content|fn) ：向每个匹配的元素后插入内容 insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面 二、案例 一、如下代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
after和insertafter的区别
04-11
after和insertafter都是指在指定的元素之后插入元素，但函数的实现方式可能有所不同。其中，after通常是jQuery中的方法，而insertafter则可能是在原生JavaScript中使用的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值