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不知道要把新元素放到哪里去，反而会导致要相关的原有元素丢失。
相关推荐
jQuery提供了几种方法来实现这些功能，其中包括insertBefore(), insertAfter(), after(), 以及before()。这些方法虽然名字相似，但各自有不同的用途和行为，下面将详细介绍它们之间的区别。 首先，我们要了解的是...
在使用jQuery进行DOM操作时，append、prepend、before和after方法是经常使用的，它们可以帮助开发者以不同的方式动态地修改页面内容。同时，appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...
至于插入新元素，`JavaScript` 的 `insertBefore()` 方法需要指定目标元素作为参数，而 `jQuery` 提供了 `after()`, `insertAfter()`, `before()`, `insertBefore()` 四个方法，操作起来更为直观。 除了以上提到的...
jQuery面试题库 以下是根据给定文件信息生成的相关知识点： jQuery 选择器 * jQuery 中的选择器有基本选择器、后代选择器、类选择器等。 * 不同的选择器可以在不同的场景下使用，例如基本选择器用于选择某个标签...
此外，`after()`方法还有个兄弟方法`insertAfter()`，它的用法是相反的，允许开发者指定一个元素，然后将内容插入到该元素之后。例如，如果想把"Hello world!"插入到所有`<p>`元素之后，可以这样写： ```javascript...
总的来说，jQuery的`insertAfter`、`insertBefore`以及`before`、`after`等方法提供了便利的DOM操作方式，使得在JavaScript中动态地插入和移动节点变得简单直观。结合其他jQuery功能，开发者可以构建出更加生动、...
6. **insertBefore()**: 与insertAfter()相反，这个方法用于将一个元素插入到另一个元素之前。`$("#newElement").insertBefore("#existingElement")`将新元素放在已存在元素的前面。 在实际开发中，这些方法常常...
本文将详细解析`append()`、`prepend()`、`before()`、`after()`以及它们对应的`insertAfter()`和`insertBefore()`方法的用法和区别。 1. `after()`与`before()`方法： `after()`方法用于在选定的jQuery对象后面...
《jQuery项目：深入理解与实践》 jQuery，作为一款强大的JavaScript库，自2006年发布以来，一直是Web开发中的重要工具。它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务，使得JavaScript编程变得更加...
在DOM元素操作方面，文档介绍了如何使用`var()`、`after()`、`before()`、`insertBefore()`和`insertAfter()`方法。这些方法是用于在特定元素之前后插入新元素，或者更改现有元素内容的重要工具。 替换操作在JQuery...
insertAfter(content) insertBefore(content) 包裹 wrap(html|ele|fn) unwrap() wrapall(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove(...
4. **DOM插入**: `before()`, `after()`, `insertBefore()`, `insertAfter()`等方法在DOM树中插入新元素。 5. **DOM克隆和删除**: `clone()`, `detach()`, `empty()`用于复制、分离或清空元素。 ### 三、jQuery...
$.after( content ), .after( fn() ) $.before( content ), .before( fn() ) $.insertAfter( target ) $.insertBefore( target ) Inserting Around $.unwrap( ) $.wrap( wrappingElement ), .wrap( fn ) $.wrapAll...
### jQuery 1.4 特性与改进 1. **性能提升**: jQuery 1.4 通过优化内部算法和减少内存占用，显著提升了性能，尤其是在大型DOM树的处理上。 2. **$.support 对象**: 引入了`$.support`对象，用于检测浏览器的特性，...
- `size()` 返回的是 jQuery 对象中元素的数量，这与 `length` 属性相同。 6. **jQuery 中的 `this` 和索引访问**： - `$(this).get(0)` 等同于 `$(this)[0]`，都是获取 `this` 所指元素的原始 DOM 元素。 7. **...
- 插入元素：通过`before()`, `after()`, `insertBefore()`, `insertAfter()`等方法，可以在DOM树中移动或插入元素，以实现排序。 3. **动画效果**： - jQuery的`animate()`函数允许我们创建自定义的平滑动画效果...