jQuery after（）和insertAfter（）示例

最新推荐文章于 2024-02-24 21:10:48 发布
最新推荐文章于 2024-02-24 21:10:48 发布
阅读量709 收藏 3
点赞数 1
文章标签： javascript ViewUI

jQuery after（）和insertAfter（）方法都执行相同的任务，在匹配的元素后添加文本或html内容。 主要区别在于语法。

例如， 

<div class="greyBox">I'm a ipman</div>
<div class="greyBox">I'm a ipman 2</div>

1. $（'selector'）。after（'new content'）; 

$('.greyBox').after("<div class='redBox'>Iron man</div>");

2. $（'new content'）。insertAfter（'selector'）; 

$("<div class='redBox'>Iron man</div>").insertAfter('.greyBox');

结果

上面的两个方法都执行相同的任务，但是语法不同， after（）或insertAfter（） 之后的新内容将变为 

<div class="greyBox">
   I'm a ipman
</div>
<div class='redBox'>Iron man</div>

<div class="greyBox">
   I'm a ipman 2
</div>
<div class='redBox'>Iron man</div>

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.greyBox{
		padding:8px;
		background: grey;
		margin-bottom:8px;
		width:300px;
		height:100px;
	}
	.redBox{
		padding:8px;
		background: red;
		margin-bottom:8px;
		width:200px;
		height:50px;
	}
</style>

</head>
<body>
  <h1>jQuery after() and insertAfter() example</h1>

  <div class="greyBox">Ip man</div>
  
  <div class="greyBox">Ip man 2</div>
  
  <p>
  <button id="after">after()</button>
  <button id="insertAfter">insertAfter()</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#after").click(function () {
		
	  $('.greyBox').after("<div class='redBox'>Iron man</div>");
	  
    });
	
	$("#insertAfter").click(function () {
		
	  $("<div class='redBox'>Iron man</div>").insertAfter('.greyBox');
	  
    });
	
	$("#reset").click(function () {
	  location.reload();
    });
	
</script>
</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-after-and-insertafter-example/

cyan20115
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery—添加DOM节点之after方法与insertAfter()
Kiwi_no的博客
11-09 474
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
S_Tian的博客
12-01 276
after(content|fn) ：向每个匹配的元素后插入内容。 insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面。 <body> <span id="before">Hello</span> <script> $("#before").after("<i>World</i>"); ...
insertAfter()方法使用与实现原理。
m0_53415205的博客
08-17 2705
insertAfter()方法与实现原理 在某一个节点后面插入节点就是insertAfter()方法，原生js中不存在insertAfter（）方法 （1） 新元素： 你想插入的新元素（newElement）。 （2） 目标元素： 你想把这个新元素插到哪个元素（targetElement）之前。 （3） 父元素： 目标元素的父元素（parentElement）。 function insertAfter(newelement,targetelement) { var parentelement = tar
无涯教程-jQuery - Insertafter方法函数
最新发布
无涯教程
02-24 661
insert After(selector)方法将所有匹配的元素插入到另一个指定的元素集之后。
java中insertafter_jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项...
weixin_34406844的博客
02-26 371
JQuery中after、append、insertAfter、prepend的简单用法简单代码：after、append、insertAfter用法—脚本之家段落1下面的内容我们一般都是在chrome浏览器中测试这样比较容易看到效果测试代码after、append、insertAfter用法段落11、after：在选定元素之后插入指定的内容，该内容可以包含HTML标签。使用after方法向div...
javascript编写insertAfter方法
cage7181的博客
04-04 604
我们知道javascript中有appendChild方法和insertBefore方法，但是却没有insertAfter方法。当然，在JQuery中是有的。 本文用javascript实现insertAfter方法。 一。首先，我们知道appendChild方法的语法规则是： parent.appendChild(child) 作用：在父节点内部的尾部添加一个子节点。 二。而inse...
jQuery中after的两种用法实例
10-27
总结来说，`after()`方法是jQuery中的一个重要工具，它帮助开发者轻松地在DOM结构中添加内容，提升网页的动态效果和用户体验。无论是简单的文本插入还是复杂的动态生成内容，`after()`都能提供高效且灵活的解决方案...
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
11-22
总的来说，jQuery的`insertAfter`、`insertBefore`以及`before`、`after`等方法提供了便利的DOM操作方式，使得在JavaScript中动态地插入和移动节点变得简单直观。结合其他jQuery功能，开发者可以构建出更加生动、...
jQuery操作元素追加内容示例
10-15
除了这些内部插入方法，jQuery还提供了`after()`和`before()`以及它们对应的`insertAfter()`和`insertBefore()`方法，用于在元素外部进行内容追加。 5. `after()` 方法： `after()` 方法在匹配元素的外部后面添加...
JQuery进阶.docx
06-11
- `insertAfter(content)` 和 `insertBefore(content)`：分别将元素插入到指定元素的后面或前面，提供了与`after`和`before`相反的操作。 - `replaceWith(content|fn)`：将所有匹配的元素替换为指定的HTML或DOM...
jquery 追加元素append、prepend、before、after用法与区别分析
11-29
本文将详细解析`append()`、`prepend()`、`before()`、`after()`以及它们对应的`insertAfter()`和`insertBefore()`方法的用法和区别。 1. `after()`与`before()`方法： `after()`方法用于在选定的jQuery对象后面...
js之appendChild、insertBefore和insertAfter
野草的博客
01-09 1905
appendChild：插入一个子节点 insertBefore：在指定元素之前插入一个子节点 insertAfter：在指定元素后插入一个子节点
jQuery中after、insertAfter的区别和用法
徐冰的博客
11-09 1190
一、after()方法： after(content|fn) ：向每个匹配的元素后插入内容。 html代码如下： <span id="content">I love </span> jQuery代码如下： <script> $("#content").after("<span>you.</span>");//after:在标签的外部插...
insertAfter方法的实现
m0_56204836的博客
03-25 434
第一种：直接在父节点里面插入的情况 //直接在节点原型上新增方法 Element.prototype.insertAfter = function(target, ele){ const nextEle = ele.nextSibling || ele.nextElementSibling; if(nextEle){ this.insertBefore(target, nextEle); }else{ this.appendChild(target);//ele为最后一个节点，可直接使用app
java中insertafter_javascript insertAfter()定义与用法示例
weixin_29229261的博客
02-26 275
本文实例讲述了javascript insertAfter()定义与用法。分享给大家供大家参考，具体如下：HTML部分：bbbbbbbbbddddddJavaScript部分:window.onload=function(){var a =document.createElement("span");var b =document.createTextNode("cssrain");a.appen...
4.02学习笔记 封装insertAfter
mr_sun的博客
04-02 303
将新节点插入到指定节点的后面 /* * 函数 : insertAfter * 作用 : 新节点插入到指定节点的后面 * 参数 : 兄节点/旧，弟节点/新 * 返回值: 无 * */ function insertAfter(oldNode, newNode) { if (oldNode != oldNode.parentNode.lastElementChild) { // 判断 如果不是父节点的最后一个子节点执行的语句 oldNode.parentNode.insertBefore(newNo
jquery的after与insertAfter的区别
热门推荐
风柏杨的技术博客
01-11 1万+
jquery的dom操作方法中，包括了after与insertAfter，这两个方法名字相近，所实现的功能从名字中不容易分辨，所以在经过试验后撰文一篇以加深记忆。 测试代码如下： 测试insertAfter与after的区别 first middle last 自然状态下显示是这样的：        
简述JS中after方法与insertAfter方法的区分
飞翔的企鹅的博客
11-09 1576
介绍 after() 向每个匹配的元素后插入内容 insertAfter() 将匹配的元素插入到另一个指定的元素后面 注意：after方法是在指定元素外部的末尾添加元素，而上篇博客中介绍的append方法则是在指定元素内部末尾添加元素。 区分 1、after() <!DOCTYPE html> <html> <head> ...
jQuery after() 和 insertafter()
qq_44971038的博客
11-29 205
两种方法均是在指定标签之后添加新的标签，和append()显示的效果很接近，append()是标签内末尾添加；这两种是标签外后面添加； after() <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <scrip...
after和insertafter的区别
05-09
`after` 和 `insertafter` 都是链表操作中的插入节点操作。它们的区别在于： - `after` 是在某个节点后面插入一个新节点，而 `insertafter` 是在指定的位置（通常是节点的索引或地址）后面插入一个新节点。 - `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值