jQuery中after与insertAfter的区别

最新推荐文章于 2022-05-03 11:17:47 发布
原创 最新推荐文章于 2022-05-03 11:17:47 发布 · 246 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery

本文介绍如何使用jQuery的after和insertAfter方法进行元素的外部插入操作，通过实例演示了如何向匹配元素后插入内容及将元素插入到指定位置，是前端开发中常用的技巧。
  1. after(content|fn) ：向每个匹配的元素后插入内容 //外部插入
  2. a.insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面；//外部插入，不是复制是直接移位。

<!DOCTYPE html>

<html>

  <head>

  <meta charset="utf-8" />

  <title></title>

  <script src="js/jquery-3.3.1.js"></script>

  </head>

  <body>

  <span id="content">I love </span>

  <script>

  $("#content").after("<span>you.</span>");

  </script>

  </body>

</html>

输出结果为：I love you.

insertAfter:

<!DOCTYPE html>

<html>

  <head>

  <meta charset="utf-8" />

  <title></title>

  <script src="js/jquery-3.3.1.js"></script>

  </head>

  <body>

  <span id="content">I love </span>

  <span id="letters">you.</span>

  <script>

  $("#letters").insertAfter("#content");

  </script>

  </body>

</html>

输出结果为：I love you.

目录

输出结果为：I love you.

输出结果为：I love you.

mysql insert after 触发器，游标遍历执行逻辑
steve_ji的博客
05-13 820
项目需求： 注册的新用户根据不同的账户，往另一个表插入一条账户信息 delimiter // CREATE TRIGGER register_add_account AFTER INSERT ON user FOR EACH ROW BEGIN DECLARE prd_symbol varchar(30); DECLARE done int default 0;/*判断循环是否关闭的标志位*/ DECLARE result CURSOR FO
jquery的after与insertAfter的区别
热门推荐
风柏杨的技术博客
01-11 1万+
jquery的dom操作方法中，包括了after与insertAfter，这两个方法名字相近，所实现的功能从名字中不容易分辨，所以在经过试验后撰文一篇以加深记忆。 测试代码如下： 测试insertAfter与after的区别 first middle last 自然状态下显示是这样的：        
jQuery中after、insertAfter的区别和用法
徐冰的博客
11-09 1339
一、after()方法： after(content|fn) ：向每个匹配的元素后插入内容。 html代码如下： <span id="content">I love </span> jQuery代码如下： <script> $("#content").after("<span>you.</span>");//after:在标签的外部插...
jquery的insertBefore(),insertAfter(),after(),before()
black-heart的专栏
06-19 1187
insertBefore():a.insertBefore(b) 　　　　　　　a在前，b在后, 　　　　　　　a：是一个选择器，b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> &...
jQuery—添加DOM节点之after方法与insertAfter()
Kiwi_no的博客
11-09 552
after(content|fn) ：向每个匹配的元素后插入内容； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script&...
【jQuery】after()与insertAfter()
景谦Nice的博客
11-28 293
after()：向每个匹配的元素后插入内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>after()</title> <script src="js/jquery-3.3.1.js"></script> &lt...
jQuery中append、insertBefore、after与insertAfter方法注意事项
10-28
在使用jQuery进行DOM操作时，append、prepend、before和after方法是经常使用的，它们可以帮助开发者以不同的方式动态地修改页面内容。同时，appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
10-21
jQuery提供了几种方法来实现这些功能，其中包括insertBefore(), insertAfter(), after(), 以及before()。这些方法虽然名字相似，但各自有不同的用途和行为，下面将详细介绍它们之间的区别。 首先，我们要了解的是...
jQuery中after的两种用法实例
10-27
总结来说，`after()`方法是jQuery中的一个重要工具，它帮助开发者轻松地在DOM结构中添加内容，提升网页的动态效果和用户体验。无论是简单的文本插入还是复杂的动态生成内容，`after()`都能提供高效且灵活的解决方案...
jQuery中after和insertAfter方法
ANFO的博客
11-09 618
在jQuery中标签所显示的内容是可以叠加的，如after()方法和insertAfter()方法都是用来在标签内的尾部添加内容，但二者的区别在于，after()方法是在标签外的尾部添加内容，而insertAfter()方法是将内容添加到目标标签外的尾部的，这也是这两个方法与append()和appendTo()的区别：jQuery中append与appendTo方法 以下是代码示例： 首先...
after()与insertAfter()实例
行天之路
11-14 1502
在jquery中，after()与insertAfter()函数有着相同的功能，能够完成相同的任务，即添加文本或者html内容到匹配元素的后面，其主要的区别在于语法上的区别。   例如： divclass="greyBox">I'm a ipman/div> divclass="greyBox">I'm a ipman 2/div> 1. $(‘selector’).after(
简述JS中after方法与insertAfter方法的区分
飞翔的企鹅的博客
11-09 1758
介绍 after() 向每个匹配的元素后插入内容 insertAfter() 将匹配的元素插入到另一个指定的元素后面 注意：after方法是在指定元素外部的末尾添加元素，而上篇博客中介绍的append方法则是在指定元素内部末尾添加元素。 区分 1、after() <!DOCTYPE html> <html> <head> ...
jQuery after（）和insertAfter（）示例
一名可爱的技术搬运工
05-22 770
jQuery after（）和insertAfter（）方法都执行相同的任务，在匹配的元素后添加文本或html内容。 主要区别在于语法。 例如， <div class="greyBox">I'm a ipman</div> <div class="greyBox">I'm a ipman 2</div> 1. $（'selector'）。a...
Servlet获取form表单数据
wangdada___的博客
11-01 2968
Servlet是什么？ Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。 如何使用Servlet获取表单数据？ 一、建立连接 要实现Servlet传递表单数据的效果，我们需要一个表单数据输入端的页面和一个表单数据接收端的Java文件。 首先需要创建一个W...
C++ 学习第二天 求和函数的程序编写和cout.width()函数的使用
wangdada___的博客
04-27 1363
题目是这样的： 要求︰编写一个程序，要求用户输入一串整数和任意数目的空格，这些整数位于同一行中，但允许出现在该行中的任何位置，当用户按下键盘上的“Enter”键时，数据输入结束，程序自动对所有的整数进行求和并打印出结果。 代码如下： #include<iostream> using namespace std; int main() { int sum = 0; cout << "请输入一串整数和任意空格数目："; int i;// >> 是重载
c实验报告： 循环结构程序设计和函数
wangdada___的博客
05-05 1312
实现求等差数列前n项和，运行结果如图1所示 #include <stdio.h> int main(void) { int i,n,sum; scanf("%d",&n); sum=0; for(i=1;i<=n;i++) { sum=sum+i; } printf("%d\n",...
详述scope作用
wangdada___的博客
02-22 1306
scope是用来声明Spring中的bean在Spring IOC中存活时间的属性 spring 中scope分为四种分别为：singleton、propertype、request、session javaweb中是request,session request:请求模式；每个Http请求都会重新创建一个全新的requestPreferences对象，当请求结束，对象也被spring容器销...
C++ 学习 第九天 指针
wangdada___的博客
05-03 878
1. const修饰指针 --- 常量指针，指针指向的内容不能改，指向的地址可以改。const int *p=&a; 2. const修饰常量 --- 指针常量，指针指向的内容能改，指向的地址不可以改。int *const p=&a; 3. const即修饰指针，又修饰常量,指针指向的内容不能改，指向的地址不可以改。 const int *const p =&a; int main() { int a = 10; int b = 10; //...
java css position（定位）自我理解
wangdada___的博客
10-14 869
position 属性指定了元素的定位类型。 position属性有五个值： static fixed relative absolute sticky 1.static:默认值定位，静态定位的元素不会受到 top, bottom, left, right影响。 div.static { position: static; border: 3px solid red; } ...
after和insertafter的区别
04-11
after和insertafter都是指在指定的元素之后插入元素，但函数的实现方式可能有所不同。其中，after通常是jQuery中的方法，而insertafter则可能是在原生JavaScript中使用的方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值