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

网络编程 2024/11/17 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.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>");

运行之后的代码结构为：

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

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

2、append：在选定元素的结尾插入指定内容，该内容也可以包含HTML标签。
使用append方法向div之后插入代码：

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

运行之后的代码结构为：


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

3、insertAfter：在被选元素之后插入指定内容或已有元素，该内容可以是HTML标签，也可以是选择器表达式
HTML标签：
使用insertAfter方法向div之后插入代码：

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

运行之后的结构为：


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

4、选择器表达式：这种情况是在页面中存在要插入的元素。
简答的代码结构：


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


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

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

运行之后的代码结构为：

下面脚本.之家小编来给大家对比一下
代码执行之前

代码执行以后

有没有发现div的闭合跑到最上面了，然后
再使用insertAfter方法向<p>之后插入代码：

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

运行之后的代码结构为：


由上面的两个例子可以看出：使用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);
 }
 });


是不是感觉很酷呢

就是为较大的图片加上一个a链接，在新窗口打开。这样主要是方便用户查看较大的图片。
5、prepend：在选定元素的开头插入指定内容，该内容可以包含HTML标签。
使用prepend方法向<div>之后插入代码：

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

运行之后的代码结构为：

其结构跟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

标签：

append,appendTo,prepend,prependTo,before,insertBefore,after,insertAfter

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

append,appendTo,prepend,prependTo,before,insertBefore,after,insertAfter

基于Jquery的动态创建DOM元素的代码

基于Jquery的标签智能验证实现代码

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接