jQuery 添加元素

通(tōng)過 jQuery，可(kě)以很(hěn)容易地(dì)添加新元素/內(nèi)容。

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

我們将學習用于添加新內(nèi)容的四個 jQuery 方法：

append() - 在被選元素的結尾插入內(nèi)容

prepend() - 在被選元素的開(kāi)頭插入內(nèi)容

after() - 在被選元素之後插入內(nèi)容

before() - 在被選元素之前插入內(nèi)容

jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內(nèi)容。

實例

$("p").append("Some appended text.");

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開(kāi)頭插入內(nèi)容。

實例

$("p").prepend("Some prepended text.");

通(tōng)過 append() 和(hé) prepend() 方法添加若幹新元素

在上(shàng)面的例子中，我們隻在被選元素的開(kāi)頭/結尾插入文本/HTML。

不過，append() 和(hé) prepend() 方法能(néng)夠通(tōng)過參數(shù)接收無限數(shù)量的新元素。可(kě)以通(tōng)過 jQuery 來生成文本/HTML（就像上(shàng)面的例子那(nà)樣），或者通(tōng)過 JavaScript 代碼和(hé) DOM 元素。

在下(xià)面的例子中，我們創建若幹個新元素。這(zhè)些元素可(kě)以通(tōng)過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然後我們通(tōng)過 append() 方法把這(zhè)些新元素追加到文本中（對 prepend() 同樣有效）：

實例

function appendText()

{

var txt1="<p>Text.</p>"; // 以 HTML 創建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 創建新元素

var txt3=document.createElement("p"); // 以 DOM 創建新元素

txt3.innerHTML="Text.";

$("p").append(txt1,txt2,txt3); // 追加新元素

}

jQuery after() 和(hé) before() 方法

jQuery after() 方法在被選元素之後插入內(nèi)容。

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

實例

$("img").after("Some text after");

$("img").before("Some text before");

通(tōng)過 after() 和(hé) before() 方法添加若幹新元素

after() 和(hé) before() 方法能(néng)夠通(tōng)過參數(shù)接收無限數(shù)量的新元素。可(kě)以通(tōng)過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

在下(xià)面的例子中，我們創建若幹新元素。這(zhè)些元素可(kě)以通(tōng)過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然後我們通(tōng)過 after() 方法把這(zhè)些新元素插到文本中（對 before() 同樣有效）：

實例

function afterText()

{

var txt1="<b>I </b>"; // 以 HTML 創建新元素

var txt2=$("<i></i>").text("love "); // 通(tōng)過 jQuery 創建新元素

var txt3=document.createElement("big"); // 通(tōng)過 DOM 創建新元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3); // 在 img 之後插入新元素

}