jQuery 添加元素

jQuery的一個(gè)非常重要的部分是可以操縱DOM。

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

在本章中，我們將解釋如何向DOM添加新的HTML元素/內(nèi)容。

jQuery添加新的HTML內(nèi)容

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

我們有以下用于添加新內(nèi)容的jQuery方法：

• append()

• prepend()

• after()

• before()

• wrap()

下面將向您展示如何使用每種方法。

jQuery append()方法

jQuery append()方法在每個(gè)選定元素的末尾（作為最后一個(gè)子元素）插入指定的內(nèi)容。

下面的示例將一些文本內(nèi)容附加到所有段落中：

$("button").click(function(){
  $("p").append("Hello world");
});

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

$("button").click(function(){
  $("p").append("<b>Hello world</b>");
});

jQuery prepend()方法

jQuery prepend()方法在每個(gè)選定元素的開頭（作為第一個(gè)子元素）插入指定的內(nèi)容。

以下示例在所有段落之前添加了一些文本內(nèi)容：

$("button").click(function(){
  $("p").prepend("Hello world");
});

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

$("button").click(function(){
  $("p").prepend("<b>Hello world</b>");
});

使用append()和prepend()添加多個(gè)元素

在上面的示例中，我們僅在所選HTML元素的開始/結(jié)尾處插入了一些文本/ HTML。

但是，append()和prepend()方法都可以采用無限數(shù)量的新元素作為參數(shù)。

可以使用HTML元素（如上述示例），DOM元素或jQuery對(duì)象生成新元素。

在以下示例中，我們使用HTML元素，DOM元素和jQuery對(duì)象創(chuàng)建幾個(gè)新元素：

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

jQuery after()方法

jQuery after()方法在所選元素之后插入指定的內(nèi)容。

下面的示例在每個(gè)段落之后插入內(nèi)容：

$("button").click(function(){
  $("p").after("<p>Hello world</p>");
});

jQuery before()方法

jQuery before()方法在所選元素之前插入指定的內(nèi)容。

下面的示例在每個(gè)段落之前插入內(nèi)容：

$("button").click(function(){
  $("p").before("<p>Hello world</p>");
});

使用after()和before()添加多個(gè)元素

同樣，after()和before()方法都可以采用無限數(shù)量的新元素作為參數(shù)。

可以使用HTML元素（如上述示例），DOM元素或jQuery對(duì)象生成新元素。

在以下示例中，我們使用HTML元素，DOM元素和jQuery對(duì)象創(chuàng)建幾個(gè)新元素：

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

jQuery wrap()方法

jQuery wrap()方法將指定的HTML結(jié)構(gòu)包裹在每個(gè)選定的元素前后。

下面的示例將DIV元素包裹在每個(gè)<p>元素前后：

$("button").click(function(){
  $("p").wrap("<div></div>");
});

jQuery HTML參考

有關(guān)完整的HTML方法參考，請(qǐng)?jiān)L問我們的jQuery HTML / CSS參考。