相思资源网 Design By www.200059.com

JQuery中after、append、insertAfter、prepend的简单用法

简单代码:

<html>
<head>
<title>after、append、insertAfter用法—</title>
</head>
<body>
<div>
<p>段落1</p>
</div>
</body>
</html>

下面的内容我们一般都是在chrome浏览器中测试这样比较容易看到效果

测试代码

<!DOCTYPE html>
<html>
<head>
<title>after、append、insertAfter用法</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

1、after:在选定元素之后插入指定的内容,该内容可以包含HTML标签。

使用after方法向div之后插入代码:

$("div").after("<p>段落2</p>");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

偷偷的告诉你的技术测试代码都是用的这个方法,简单而直观。

由此可知:使用after方法追加内容,是在选定的元素外部追加,也就是跳出选定元素在选定元素之后追加。

2、append:在选定元素的结尾插入指定内容,该内容也可以包含HTML标签。

使用append方法向div之后插入代码:

$("div").append("<p>段落2</p>");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

因此:使用append方法追加内容,是在选定元素的内部追加,没有跳出选定元素,直接在选定元素的尾部追加内容。

3、insertAfter:在被选元素之后插入指定内容或已有元素,该内容可以是HTML标签,也可以是选择器表达式

HTML标签:

使用insertAfter方法向div之后插入代码:

$("<p>段落2</p>").insertAfter("div");

运行之后的结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

它的结构跟after的结构相同,也是在选定的元素外部追加内容,跳出选定元素之后追加。

4、选择器表达式:这种情况是在页面中存在要插入的元素。

简答的代码结构:

<div> 
 <h1>这是一个标题1</h1> 
 <h1>这是一个标题2</h1> 
 <h1>这是一个标题3</h1> 
</div> 
<p>这是一个段落。</p> 
<p>这是另一个段落。</p> 

使用insertAfter方法向<div>之后插入代码:

$("h1").insertAfter("div");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

下面脚本.之家小编来给大家对比一下

代码执行之前

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

代码执行以后

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

有没有发现div的闭合跑到最上面了,然后

再使用insertAfter方法向<p>之后插入代码:

$("h1").insertAfter("p");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

由上面的两个例子可以看出:使用insertAfter方法插入已有元素,已有元素会被从当前位置移走,然后被添加到选定的元素之后。有点类似于:先复制一份已有元素,然后在页面上删除已有元素,再在每一个选定元素之后粘贴一份复制的已有元素。

所有基于这个原理,我们看一下基于jquery的文章中所有图片width大小的代码

$('#content').find('img').each(function(){
 var img = this;
 if (img.width > 600) {
  img.style.width = "600px";
  img.style.height = "auto";
  //$(img).removeAttr('height');
  var aTag = document.createElement('a');
  aTag.href = img.src;
			aTag.target="_blank";
  $(aTag).addClass('bPic')
  .insertAfter(img).append(img)
  .lightBox(options);
 }
 });

是不是感觉很酷呢

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

就是为较大的图片加上一个a链接,在新窗口打开。这样主要是方便用户查看较大的图片。

5、prepend:在选定元素的开头插入指定内容,该内容可以包含HTML标签。

使用prepend方法向<div>之后插入代码:

$("div").prepend("<p>段落2</p>");

运行之后的代码结构为:

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

其结构跟append的结构相同,也是直接在选定元素的内部追加,不需要跳出选定元素,不同的是append是在选定元素的尾部追加,prepend是在选定元素的开头追加。

这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂。

如下:

方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置;若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置。
由此,若目标只匹配一个元素时,使用前述方法后源将被删除。 B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.insertBefore(A) A.after(B) B.insertAfter(A)

举例说明:在上图中,A.append(B)表示把B添加到与A匹配的所有元素的现有内容后面,因此B是源,A是目标包装集。

标签:
append,appendTo,prepend,prependTo,before,insertBefore,after,insertAfter

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项”

暂无jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?