jQuery pagdagdag ng elemento

Sa pamamagitan ng jQuery, madali lamang ang pagdagdag ng bagong elemento/kontento.

Magdagdag ng bagong HTML nilalaman

Aaralain namin ang apat na jQuery method na ginamit para magdagdag ng bagong nilalaman:

  • append() - Nagdudugtong ng nilalaman sa katapusan ng napiling elemento
  • prepend() - Nagdudugtong ng nilalaman sa simula ng napiling elemento
  • after() - Nagdudugtong ng nilalaman pagkatapos ang napiling elemento
  • before() - Nagdudugtong ng nilalaman bago ang napiling elemento

Ang paraan na jQuery append()

Ang paraan na jQuery append() ay nagdudugtong ng nilalaman sa katapusan ng napiling elemento.

实例

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

亲自试一试

Ang paraan na jQuery prepend()

Ang paraan na jQuery prepend() ay nagdudugtong ng nilalaman sa simula ng napiling elemento.

实例

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

亲自试一试

Pagdagdag ng ilang bagong elemento sa pamamagitan ng append() at prepend()

Sa itaas na halimbawa, tanging sa simula at sa katapusan ng napiling elemento ay nagsasagawa kami ng pagdagdag ng text/HTML.

Gayunpaman, ang mga paraan na append() at prepend() ay kayang tanggapin ang walang hanggan na bilang ng bagong elemento. Maaaring gumawa ng text/HTML sa pamamagitan ng jQuery (katulad ng sa itaas na halimbawa), o sa pamamagitan ng JavaScript code at DOM element.

Sa mga sumusunod na halimbawa, nagsasagawa kami ng ilang bagong elemento. Ang mga elemento na ito ay maaaring bumuo sa pamamagitan ng text/HTML, jQuery o JavaScript/DOM. Pagkatapos, magdagdag kami ng mga bagong elemento sa teksto sa pamamagitan ng paraan na append() (tanging tinuturing din ang prepend() sa pagdagdag sa simula):

实例

function appendText()
{
var txt1="<p>Text.</p>";               // Sa pamamagitan ng HTML na bumuo ng bagong elemento
var txt2=$("<p></p>").text("Text.");   // Sa pamamagitan ng jQuery na bumuo ng bagong elemento
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

亲自试一试

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

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

亲自试一试

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

亲自试一试

jQuery HTML 参考手册

如需有关 jQuery HTML 方法的完整内容，请访问以下参考手册：