بوسیله jQuery می توانید به راحتی عناصر و محتوای جدیدی را اضافه کنید.

افزودن محتوای جدید html

چهار متد زیر برای افزودن محتوای جدید استفاده می شوند:
()Append  افزودن محتوا به انتهای عنصر انتخاب شده
()Prepend افزودن محتوا به ابتدای عنصر انتخاب شده
()After افزودن محتوا بعد از عنصر انتخاب شده
()Before افزودن محتوا قبل از عنصر انتخاب شده

متد ()append

این متد برای افزودن محتوا به انتهای عنصر انتخاب شده به کار می رود:

مثال :

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

متد ()prepend

این متد برای افزودن محتوا به ابتدای عنصر انتخاب شده به کار می رود.

مثال :

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

افزودن چند عنصر جدید با ()append و ()prepend

در هر دو مثال بالا،ما فقط متن/html را به ابتدا/انتهای عنصر انتخاب شده اضافه کردیم.
این دو متد با جاوااسکریپت یا jQuery،می توانند بی نهات عنصر جدید را به عنوان پارامتر دریافت کنند. عناصر جدید می توانند با متن / html ایجاد شوند(مانند مثال بالا).
در مثال زیر، چند عنصر جدید را ایجاد می کنیم، عناصر با متن/html، jQuery و جاوااسکریپت/DOM ساخته می شوند. سپس عناصر جدید را با متد ()append اضافه می کنیم(این روش برای متد ()prepend هم صدق می کند).

مثال :

function appendText() {
    var txt1 = "
Text.
";               // Create element with HTML 
    var txt2 = $("
").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Append the new elements
} 

متد های ()after و ()before

متد ()after برای افزودن محتوا بعد از عنصر انتخاب شده به کارمی رود.
متد ()befor برای افزودن محتوا قبل از عنصر انتخاب شده به کارمی رود.

مثال :

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

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

افزودن چند  عنصر جدید با ()after و ()before

دو متد ()after و ()before با جاوااسکریپت یا jQuery،می توانند بی نهات عنصر جدید را به عنوان پارامتر دریافت کنند. عناصر جدید می توانند با متن / html ایجاد شوند(مانند مثال بالا).
در مثال زیر، چند عنصر جدید را ایجاد می کنیم، عناصر با متن/html، jQuery و جاوااسکریپت/DOM ساخته می شوند. سپس عناصر جدید را با متد  ()after اضافه می کنیم. (این روش برای متد ()before هم صدق می کند).

مثال :

function afterText() {
    var txt1 = "I ";                    // Create element with HTML 
    var txt2 = $("").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after 
}