jquery中after与insertAfter有什么区别

发布网友发布时间：2022-04-25 14:37

共3个回答

懂视网时间：2022-05-14 15:03

jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jquery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。下面我将带大家了解一下jQuery的after方法怎么用？

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

jquery视频教程

语法

$(selector).after(content,function(index))

参数	描述
content	必需。规定要插入的内容（可包含 HTML 标签）。
function(index)	规定返回待插入内容的函数。index - 返回集合中元素的 index 位置。

举个栗子：

$("button").click(function(){

 $("p").after("<p>Hello world!</p>");
});

热心网友时间：2022-05-14 12:11

jquery的dom操作方法中，包括了after与insertAfter，这两个方法名字相近，所实现的功能从名字中不容易分辨，所以在经过试验后撰文一篇以加深记忆。

测试代码如下：

<html>

<head>

<meta charset=”utf-8″>

<title> 测试insertAfter与after的区别 </title>

</head>

<body>

<ul>

<li class=”first”>first</li>

<li class=”middle”>middle</li>

<li class=”last”>last</li>

</ul>

</body>

</html>

自然状态下显示是这样的：

添加脚本：$(‘.first’).insertAfter($(‘.last’));

则会把first移到last后面去，变成了这样：

如果把insertAfter方法换为after，效果则为：

从上述对比可以看出，其实这两个方法的差别就像主语跟宾语的差别一样，是主与从的问题。

after方法，是把参数元素移到调用方法的元素的后面，而insertAfter方法则恰恰相反，是把调用方法的元素插入到参数元素的后面。

另外要注意的是，当要用这两个方法在dom树中添加新元素时,如
”<li>new</li>”，这样的html字符串不能出现在after方法的调用主体或
insertAfter的参数中，因为这样一来，jquery不知道要把新元素放到哪里去，反而会导致要相关的原有元素丢失。

热心网友时间：2022-05-14 13:29

楼主您好，把和被的关系
A.after(B)等同于B.insertAfter(A)