jQuery 添加元素
jQuery的一个非常重要的部分是可以操纵DOM。
jQuery提供了以有效方式添加新HTML元素的方法。
在本章中，我们将解释如何向DOM添加新的HTML元素/内容。
jQuery添加新的HTML内容
使用jQuery，我们可以轻松添加新的HTML元素。
我们有以下用于添加新内容的jQuery方法：
append()
prepend()
after()
before()
wrap()
下面将向您展示如何使用每种方法。
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参考。