编辑这个页面须要登录或更高权限！

jQuery 添加元素

jQuery的一个非常重要的部分是可以操纵DOM。

jQuery提供了以有效方式添加新HTML元素的方法。

在本章中，我们将解释如何向DOM添加新的HTML元素/内容。

jQuery添加新的HTML内容

使用jQuery，我们可以轻松添加新的HTML元素。

我们有以下用于添加新内容的jQuery方法：

下面将向您展示如何使用每种方法。

jQuery append()方法

jQuery append()方法在每个选定元素的末尾（作为最后一个子元素）插入指定的内容。

下面的示例将一些文本内容附加到所有段落中：

$("button").click(function(){
  $("p").append("Hello world");
});
测试看看‹/›

下面的示例将HTML附加到所有段落中：

$("button").click(function(){
  $("p").append("<b>Hello world</b>");
});
测试看看‹/›

jQuery prepend()方法

jQuery prepend()方法在每个选定元素的开头（作为第一个子元素）插入指定的内容。

以下示例在所有段落之前添加了一些文本内容：

$("button").click(function(){
  $("p").prepend("Hello world");
});
测试看看‹/›

以下示例在所有段落之前添加了一些HTML：

$("button").click(function(){
  $("p").prepend("<b>Hello world</b>");
});
测试看看‹/›

使用append()和prepend()添加多个元素

在上面的示例中，我们仅在所选HTML元素的开始/结尾处插入了一些文本/ HTML。

但是，append()和prepend()方法都可以采用无限数量的新元素作为参数。

可以使用HTML元素（如上述示例），DOM元素或jQuery对象生成新元素。

在以下示例中，我们使用HTML元素，DOM元素和jQuery对象创建几个新元素：

function appendText() {
  let x = "<p>示例文本.</p>";  // 用HTML创建元素  
  let y = $("<p></p>").text("示例文本.");  // 用jQuery创建
  let z = document.createElement("p");// 用DOM创建
  z.innerHTML = "示例文本.";
  $("body").append(x, y, z);  //添加新元素 
}
测试看看‹/›

jQuery after()方法

jQuery after()方法在所选元素之后插入指定的内容。

下面的示例在每个段落之后插入内容：

$("button").click(function(){
  $("p").after("<p>Hello world</p>");
});
测试看看‹/›

jQuery before()方法

jQuery before()方法在所选元素之前插入指定的内容。

下面的示例在每个段落之前插入内容：

$("button").click(function(){
  $("p").before("<p>Hello world</p>");
});
测试看看‹/›

使用after()和before()添加多个元素

同样，after()和before()方法都可以采用无限数量的新元素作为参数。

可以使用HTML元素（如上述示例），DOM元素或jQuery对象生成新元素。

在以下示例中，我们使用HTML元素，DOM元素和jQuery对象创建几个新元素：

function afterText() {
  let x = "<p>示例文本.</p>";  // 用HTML创建元素  
  let y = $("<p></p>").text("示例文本.");  // 用jQuery创建
  let z = document.createElement("p");// 用DOM创建
  z.innerHTML = "示例文本.";
 $("h1").after(x, y, z);  // 在<h1>之后插入新元素
}
测试看看‹/›

jQuery wrap()方法

jQuery wrap()方法将指定的HTML结构包裹在每个选定的元素前后。

下面的示例将DIV元素包裹在每个<p>元素前后：

$("button").click(function(){
  $("p").wrap("<div></div>");
});
测试看看‹/›

jQuery HTML参考

有关完整的HTML方法参考，请访问我们的jQuery HTML / CSS参考。

jQuery 删除元素jQuery 获取/设置