`
CshBBrain
  • 浏览: 651342 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:145225
Group-logo
HTML5移动开发
浏览量:138102
社区版块
存档分类
最新评论

jQuery中append、insertBefore、after与insertAfter方法注意事项

阅读更多

        jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项

        这里列的是针对初学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是目标包装集。

分享到:
评论

相关推荐

    jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    总的来说,jQuery的`insertAfter`、`insertBefore`以及`before`、`after`等方法提供了便利的DOM操作方式,使得在JavaScript中动态地插入和移动节点变得简单直观。结合其他jQuery功能,开发者可以构建出更加生动、...

    jquery 追加元素append、prepend、before、after用法与区别分析

    insertAfter和insertBefore方法与after和before方法不同,它们的调用方式是将元素作为第一个参数,然后将目标位置作为第二个参数。这两个方法实际上是改变元素的位置,将元素移动到指定的位置。例如: ```javascript...

    jQuery 文档操作方法

    jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数,用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构,提高开发效率和代码质量。本文将对 ...

    jquery和javascript的区别(常用方法比较)

    至于插入新元素,`JavaScript` 的 `insertBefore()` 方法需要指定目标元素作为参数,而 `jQuery` 提供了 `after()`, `insertAfter()`, `before()`, `insertBefore()` 四个方法,操作起来更为直观。 除了以上提到的...

    jquery插入节点.

    6. **insertBefore()**: 与insertAfter()相反,这个方法用于将一个元素插入到另一个元素之前。`$("#newElement").insertBefore("#existingElement")`将新元素放在已存在元素的前面。 在实际开发中,这些方法常常...

    jQuery插入节点1

    jQuery 提供了多种方法来插入节点,包括 `append()`、`appendTo()`、`prepend()`、`prependTo()`、`after()`、`insertAfter()`、`before()` 和 `insertBefore()`。 * `append()` 方法将节点追加到匹配到的子元素的...

    jQuery 1.4 中文手册(速查表) chm

    3. **DOM操作**: `append()`、`prepend()`、`insertBefore()` 和 `insertAfter()` 等方法用于动态添加或修改DOM元素。 4. **事件处理**: 使用`on()`、`off()`、`click()`等方法绑定和解绑事件,`$(document).ready...

    jquery方法大全

    接下来将详细介绍文件中提到的jQuery方法。 ### DOM操作方法 - **addClass()**:给选定的元素添加一个或多个类样式。例如,`$("p").addClass("newClass");`会给所有`<p>`元素添加`newClass`类。 - **attr()**:...

    Jquery-1.9.1源码分析系列(十一)之DOM操作

    DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。  DOM操作函数中后五种方法使用的依然是前面五种方法,源码 ...

    jquery常用的方法

    以下是对标题“jquery常用的方法”中提到的一些主要jQuery方法的详细解释: 1. **添加样式**: `$(”p”).addClass(css中定义的样式类型)` - 这个方法用于向指定的元素添加CSS类,例如`addClass("highlight")`可以将...

    jquery 添加节点的几种方法介绍

    这两个方法与 `after()` 和 `before()` 方法类似,允许将选定的元素移动到指定的元素的后面(`insertAfter()`)或前面(`insertBefore()`)。这在需要重新安排页面上元素的位置时非常有用。示例如下: ```...

    jQuery 方法大全方便学习参考

    下面将详细介绍jQuery中的一些常用方法和概念: 1. 属性与样式操作 - addClass:给元素添加一个或多个样式类名。 - attr:用于获取或设置元素的属性和值。可以一次性设置多个属性,或者获取单个属性值。 - ...

    jQuery方法大全

    - `$(元素名称).insertAfter(content)` 和 `$(元素名称).insertBefore(content)`:相应地将元素插入到其他内容之后或之前。 - `$(元素).next(expr)`,`$(元素).prev(expr)`,`$(元素).siblings(expr)`:找到元素的...

    JQUERY 1.3中文文档

    jQuery 1.3提供了丰富的DOM操作方法,如`append()`, `prepend()`, `before()`, `after()`用于在元素之间插入内容;`html()`, `text()`, `val()`用于获取或设置元素的内容;`appendTo()`, `prependTo()`, `...

    jQuery常用方法jQuery常用方法

    根据提供的文件信息,我们可以归纳出一系列关于jQuery的重要知识点与用法。jQuery是一个快速、简洁的JavaScript库,使得用户能够更方便地处理HTML文档、选择DOM元素、制作动画效果,并为网页提供事件处理、Ajax交互...

Global site tag (gtag.js) - Google Analytics