jquery after append appendTo三个函数的区别

今天药忘吃喽~ 2022-07-29 08:54 224阅读 0赞

## 1、after函数 ##

## 定义和用法： ##

##### after() 方法在被选元素后插入指定的内容。 #####

### 语法： ###

##### $(selector).after(content) #####

#### 实例： ####

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$().ready(function()\{  
  $("button").click(function()\{  
    $("span").after("<a href="\#">ddddd</a>")

\})  
\})  
</script>  
</head>

<body>  
<span>aaaaaaaaaaaaaaa</span>  
<button>after函数</button>  
</body>  
</html>

结果如下：

<span>aaaaaaaaaaaaaaa</span>  
<a href="\#">ddddd</a>

span标签后面多了一个a标签

## 2、append函数 ##

## 定义和用法： ##

##### append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 #####

#### 语法： ####

##### $(selector).append(*content*) #####

#### 实例： ####

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$().ready(function()\{  
  $("button").click(function()\{  
    $("span").append("<a href="\#">ddddd</a>")

\})  
\})  
</script>  
</head>

<body>  
<span>aaaaaaaaaaaaaaa</span>  
<button>after函数</button>  
</body>  
</html>

##### 结果如下： #####

<span>aaaaaaaaaaaaaaa<a href="\#">ddddd</a></span>  
span标签里面多了一个a标签

## 3、appendTo函数 ##

## 定义和用法： ##

##### appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 #####

#### 语法： ####

##### $(*content*).appendTo(*selector*)实例： #####

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$().ready(function()\{  
  $("button").click(function()\{  
   // $("span").appendTo("<a href="\#">ddddd</a>"),这样的写法是不正确的

$("<a href="\#">ddddd</a>").appendTo("span")

\})  
\})  
</script>  
</head>

<body>  
<span>aaaaaaaaaaaaaaa</span>  
<button>after函数</button>  
</body>  
</html>

##### 结果如下： #####

<span>aaaaaaaaaaaaaaa<a href="\#">ddddd</a></span>  
span标签里面多了一个a标签

效果和append函数是一样，只不过它们的写法是反着来写的而已

备注：before函数与after函数相反，表示是元素的前面加入指定元素

**本文是我转载而来，没有联系到原博主  如若冒犯，请猿与我即使联系，在此道歉**

**另外，对于append（）和appendTo（）的区别，原博主的观点，我不敢苟同  二者肯定是有区别的，等我日后研究研究，再给大家分享**

** **

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

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

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

ゞ浴缸里的玫瑰/ 2024年04月18日 06:35/ 0 赞/ 70 阅读

相关 jQuery必会的增删改查Dom操作2(insertBefore、before、insertAfter 、after、appendTo 、append、prependTo 、prepend、...)

文章目录 insertBefore 和 before insertAfter 和 after appendTo 和 append

冷不防/ 2023年07月17日 06:24/ 0 赞/ 8 阅读

相关 jQuery append() 方法与 after() 方法

定义和用法 after() 方法在被选元素后插入指定的内容，append() 方法在被选元素的结尾插入指定内容。代码示例一 <!DOCTYPE html

古城微笑少年丶/ 2022年09月26日 03:14/ 0 赞/ 189 阅读

相关 jquery after(),append()方法

jQuery after() 方法 after() 方法在被选元素后插入指定的内容。提示：如需在被选元素前插入内容，请使用 [ before()][before] 方

左手的ㄟ右手/ 2022年08月22日 06:16/ 0 赞/ 167 阅读

相关 JQuery 修改元素 html() append() after() 区别

`html()`：返回或设置被选元素的内容。 `append()`：在被选元素的结尾（仍然在内部）插入指定内容。 `after()`：被选元素后插入指定的内容

「爱情、让人受尽委屈。」/ 2022年08月09日 12:42/ 0 赞/ 190 阅读

相关 jquery after append appendTo三个函数的区别

1、after函数定义和用法： after() 方法在被选元素后插入指定的内容。语法： $(selector).after(content)

今天药忘吃喽~/ 2022年07月29日 08:54/ 0 赞/ 225 阅读

相关 jquery append 和after 的区别

jquery append 和after 的区别 [牛牛最美伋][Link 1] | 浏览 2262 次 |[举报][Link 2] 我有更好的答案

朱雀/ 2022年06月01日 00:49/ 0 赞/ 203 阅读

相关 jquery append和after, prepend和before的区别

1. append()和prepend() 假设 <div class='a'> //<---you want div c to append in thi

谁借莪１个温暖的怀抱￠/ 2022年05月23日 12:44/ 0 赞/ 179 阅读

相关 JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用

[https://www.cnblogs.com/wx1993/p/4806873.html?tdsourcetag=s\_pcqq\_aiomsg][https_www.c

太过爱你忘了你带给我的痛/ 2022年05月09日 06:18/ 0 赞/ 282 阅读

相关 jquery中append(),appendTo(),prepend(),prependTo()的区别

1.append()方法用法：向每个匹配项的内部加入内容，该内容可以是字符，HTML元素，返回字符串内容的函数等，前面是要选择的对象，后面是被插入的内容。例：向表格

谁践踏了优雅/ 2022年02月18日 23:39/ 0 赞/ 226 阅读