JQuery中append（）、prepent（）、before（）、和after（）之间的区别

最新推荐文章于 2021-10-10 14:23:11 发布
最新推荐文章于 2021-10-10 14:23:11 发布
阅读量699 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nrskhdzl/article/details/100518945
版权

把append（）和prepnt（）放一起理解，before（）和after（）放一起理解，两组分别都是给元素添加新元素的，我们以实例来说明它们之间的区别

append（）和prepnt（）

append()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });
});
</script>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加列表项</button>
</body>
</html>

在这里插入图片描述

prepent()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend(" <b>Appended text</b>.");
  });
});
</script>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加列表项</button>
</body>
</html>

在这里插入图片描述
可以发现append（）是给被选元素内部的结尾处添加新元素，prepend（）是给被选元素内部的最前面添加

before（）和after（）

before（）

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").before(" <b>Appended text</b>.");
  });
});
</script>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加列表项</button>
</body>
</html>

在这里插入图片描述

after（）

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").after(" <b>Appended text</b>.");
  });
});
</script>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加列表项</button>
</body>
</html>

在这里插入图片描述
可以看出before（）是给被选元素外部的前面添加，after（）是给被选元素外部的后面添加的

nrskhdzl
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...
weixin_33979203的博客
05-05 6408
[html]view plaincopy<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js中常用追加元素的几种方法</title><linkrel="s...
jQuery中append(),prepend()与after(),before()的区别
buguo西瓜
10-10 1361
在jQuery中，添加元素有append(),prepend和 after(),before()两种共四个。 根据字面意思我们可以看出他们分别是追加，添加和之前，之后，意思相近。同时他们又都有添加元素的作用，容易混淆。 要想搞清楚他们之间的区别。 首先我们要明白这几个函数各自的作用。 一.append()和prepend()的作用 append()用于在被选元素的结尾插入元素。 prepend()用于在被选元素的开头插入元素。 重点在于黑体字——被选元素的， 也就是说这两个函数的添加都是添加到元素的内部的。
jq中append()、prepend()、after()、before()的区别详解
weixin_30825199的博客
03-12 328
1、append() - 在被选元素的结尾插入内容（内容的结尾，比如说有个a标签，则是在</a>这个标签之前添加东西） 2、prepend() - 在被选元素的开头插入内容（内容的开始，比如说有个a标签，则是在<a>这个标签之后添加东西） 3、after() - 在被选元素之后插入内容（元素的结尾，比如说有个a标签，则是在</a>这个标签之后添加东西） ...
jQuery append() 方法与 after() 方法
稚枭天卓
09-19 622
定义和用法 after() 方法在被选元素后插入指定的内容，append() 方法在被选元素的结尾插入指定内容。 代码示例 一 菜鸟教程(runoob.com) $(document).ready(function(){ $("button").click(function(){ $("p").after("Hello world!"); }); });
jQuery中append、insertBefore、after与insertAfter方法注意事项
10-28
jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项
jquery 追加元素append、prepend、before、after用法与区别分析
10-20
在jquery中append、prepend、before、after方法是对数据元素节点的操作系列方法了，这些方法大家了解吗？如果不了解就可以和小编来看看它们用法
jQuery添加新内容的四个常用方法分析【append，prepend，after，before】
10-17
主要介绍了jQuery添加新内容的四个常用方法,结合实例形式分析了jQuery元素添加append，prepend，after，before四种方法的功能与相关使用技巧,需要的朋友可以参考下
before与append
wikiccc的专栏
09-13 491
before：在被选元素之前（在该元素外部）插入，就要添加的内容来说，要选取他的下一个兄弟节点，然后执行before。适用于末尾有固定内容（比如：显示更多）的元素。   append：在被选元素的结尾（仍然在内部）插入；就要添加的内容来说，要选取他的父节点，然后执行append，适用于末尾没有固定内容的元素。
jquery after()和append()区别
weixin_34062469的博客
11-20 499
after() <p>段落文本1<span></span></p><!--插入到p元素之后的位置--> <p>段落文本2<span></span></p><!--插入到p元素之后的位置--> <script type="text/javascript"&g...
before、after、prepend、append四个的区别
___KAKU的博客
12-19 1191
对比的看 before和prepend before:在被选元素之前添加的内容（内容外面） prepend:在被选元素的前面添加的内容（内容的里面） 同理 after和append after:在被选元素之后添加的内容（内容外面） append:在被选元素的后面添加的内容（内容的里面）
jquery添加中append和after的区别
哎
03-12 1423
首先假设我们有个id为test的div和一个id为test2的div： 我是测试div 我是test2！ append是在指定元素内部比如： $("#test").append("测试文字"); 执行结果： 我是测试div 测试文字 我是test2！ 而after则是在指
jquery中append、prepend, before和after方法的区别
qq_38698753的博客
07-24 547
1. append()和prepend() 假设 &lt;div class='a'&gt; //&lt;---you want div c to append in this &lt;div class='b'&gt;b&lt;/div&gt; &lt;/div&gt; 1 2 3 使用 $('.a').append($('.c')); 1 效果如下： &lt;div ...
JQuery中append和JS中appendChild添加重复元素问题
qq_45955580的博客
04-08 4477
所有的追加元素方法都会去判断这个父元素里面是否拥有这个元素对象，如果拥有则以为已经添加完成，如果没有则添加进去，这也就是为什么我们只添加了一个元素的原因
JQuery中after()与before()
nairuozi的博客
11-09 297
a.after(content|fn) ：向每个匹配的元素后插入内容；有外来物插入效果 b.before(content|fn) ：向每个匹配的元素前插入内容； c.insertAfter(content)：将匹配的元素插入到另一个、指定的元素后面; //有现有物移位效果 d.insertBefore(content)：将匹配的元素插入到另一个、指定的元素前面； <!DOCTYPE ht...
jQuery中li的前添加和后追加
热门推荐
a_sid的博客
12-05 1万+
<html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-2.2.4.min.js"> </script> <script type="text/javascript"> $(function(){
js中常用追加元素的几种方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild
ArcherSYM的博客
10-21 959
看链接
JS追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
K1nney的博客
10-16 1万+
append(),在父级最后追加一个子元素 appendTo(),将子元素追加到父级的最后 prepend(),在父级最前面追加一个子元素 prependTo(),将子元素追加到父级的最前面 after(),在当前元素之后追加（是同级关系） before(),在当前元素之前追加（是同级关系） insertAfter(),将元素追加到指定对象的后面（是同级关系） insertBefore(),将元素...
jquery中append、prepend、before、after方法使用
最新发布
05-13
在 jQuery 中，有四个方法可以用来在 DOM 中插入 HTML 元素： 1. `append()`：在目标元素的结尾添加 HTML 元素。 2. `prepend()`：在目标元素的开头添加 HTML 元素。 3. `before()`：在目标元素之前添加 HTML 元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值