JQuery $.add 和 $.append 有什么区别

1个回答

柴西西

2025-06-22 22:55

Java
Java

jQuery $.add 和 $.append 的区别

jQuery 是一个广泛应用于前端开发的 JavaScript 库，提供了丰富的 API 来简化代码编写和操作 DOM 元素。在 jQuery 中，$.add 和 $.append 是两个常用的方法，用于向 DOM 中添加元素或者元素集合。尽管它们都可以完成类似的功能，但它们之间存在一些区别。

1. $.add 方法

$.add 方法用于向已有的元素集合中添加一个或多个元素。这个方法不会改变原始的元素集合，而是创建一个新的集合，并将原始集合和新添加的元素合并在一起。这样做的好处是可以在一次操作中同时处理多个元素，提高代码的执行效率。

下面是一个简单的示例代码，演示了如何使用 $.add 方法向元素集合中添加元素：

Javascript
// 创建一个包含多个元素的集合
var $elements = $('div');
// 使用 $.add 方法向集合中添加新的元素
$elements = $elements.add('span');
// 输出新的集合
console.log($elements);

在上述示例中，首先创建了一个包含多个 div 元素的集合 $elements。然后使用 $.add 方法，将一个 span 元素添加到集合中。最后，通过输出 $elements，可以看到新的集合包含了原始的 div 元素和新添加的 span 元素。

2. $.append 方法

$.append 方法用于向已有的元素集合中的每个元素末尾添加内容。这个方法会改变原始的元素集合，将新添加的内容插入到每个元素的末尾位置。如果新添加的内容是一个元素集合，则会将整个集合添加到每个元素的末尾。

下面是一个简单的示例代码，演示了如何使用 $.append 方法向元素集合中添加内容：

Javascript
// 创建一个包含多个 div 元素的集合
var $divs = $('div');
// 使用 $.append 方法向每个 div 元素中添加新的内容
$divs.append('Hello, World!
');
// 输出修改后的 div 元素集合
console.log($divs);

在上述示例中，首先创建了一个包含多个 div 元素的集合 $divs。然后使用 $.append 方法，向每个 div 元素中添加了一个新的 p 元素。最后，通过输出 $divs，可以看到每个 div 元素都包含了新添加的 p 元素。

$.add 和 $.append 是 jQuery 中常用的 DOM 操作方法，它们的区别在于：

- $.add 方法用于向已有的元素集合中添加一个或多个元素，不改变原始集合，返回一个新的集合。

- $.append 方法用于向已有的元素集合中的每个元素末尾添加内容，改变原始集合。

根据具体的需求，选择合适的方法可以更加方便地操作 DOM 元素。

示例代码

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
  <script>
    $(document).ready(function() {
      // 使用 $.add 方法向已有的元素集合中添加新的元素
      var $elements = $('div');
      $elements = $elements.add('span');
      console.log($elements);
      // 使用 $.append 方法向已有的元素集合中的每个元素添加新的内容
      var $divs = $('div');
      $divs.append('
<img src="https://img.izhida.com/topic/5bc06f5800d415cc95e1349edbaca425.jpg" alt="JS"><br>JS
Hello, World!
');
      console.log($divs);
    });
  </script>
</head>
<body>
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</body>
</html>

在上述示例代码中，首先引入了 jQuery 库。然后使用 $.add 方法向已有的元素集合中添加了一个 span 元素，并通过控制台输出了新的集合。接着使用 $.append 方法向已有的元素集合中的每个 div 元素添加了一个 p 元素，并通过控制台输出了修改后的 div 元素集合。

举报有用（4）分享收藏

JQuery $.add 和 $.append 有什么区别

1个回答

柴西西

热门话题

相关问题