jQuery add() 方法与示例

jQuery中的add()方法可以将元素添加到当前元素集合中，返回一个新的jQuery对象。

语法

$(selector).add(selector,context)

• selector: 要添加到当前元素集合中的元素选择器。也可以是HTML标记，一个jQuery对象，或者一个dom元素。
• context: 可选，要搜索的DOM元素。如果提供，selector参数则是在这个元素的上下文中查找。

示例

添加新元素

在下例中，我们创建了一个包含三个列表项的jQuery对象，然后使用add()方法添加另一个列表项。

$(document).ready(function(){
  $("li").first().addClass("selected");
  $("li").add("<li>Four</li>").appendTo("ul");
});

结果如下：

<ul>
  <li class="selected">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

添加多个元素

可以使用多个参数来添加多个元素，如下例所示：

$(document).ready(function(){
  $("li").first().addClass("selected");
  $("li").add("<li>Four</li>", "<li>Five</li>").appendTo("ul");
});

结果如下：

<ul>
  <li class="selected">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

添加jQuery对象

可以通过传递另一个jQuery对象来添加它的元素，如下例所示：

$(document).ready(function(){
  var newElement = $("<li>New Element</li>");
  $("li").first().addClass("selected");
  $("li").add(newElement).appendTo("ul");
});

结果如下：

<ul>
  <li class="selected">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>New Element</li>
</ul>

添加DOM元素

可以通过将DOM元素传递给add()方法来添加它，如下例所示：

$(document).ready(function(){
  var newListItem = document.createElement("li");
  var newListItemText = document.createTextNode("New Element");
  newListItem.appendChild(newListItemText);
  $("li").first().addClass("selected");
  $("li").add(newListItem).appendTo("ul");
});

结果如下：

<ul>
  <li class="selected">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>New Element</li>
</ul>