افزودن محتوا (Add)

با jQuery می توانی خیلی راحت افزودن محتوا در jQuery را انجام دهی و متن یا عناصر تازه را قبل، بعد یا داخل تگ های صفحه بگذاری؛ مثل وقتی وسط دفترت برگه جدید می چسبانی.

متدهای افزودن محتوا در jQuery

متد (Method) یعنی تابعی که روی یک شیء صدا می زنیم. اینجا چهار متد مهم برای افزودن محتوا داریم.

• append() محتوا را در انتهای المنت های انتخاب شده قرار می دهد.
• prepend() محتوا را در ابتدای المنت های انتخاب شده می گذارد.
• after() محتوا را بعد از المنت های انتخاب شده اضافه می کند.
• before() محتوا را قبل از المنت های انتخاب شده درج می کند.

در عمل یعنی می توانی متن، تگ های جدید یا حتی المنت های ساخته شده با JavaScript را به صفحه اضافه کنی.

افزودن متن در انتهای المنت ها با append()

متد append() محتوای جدید را در انتهای هر المنت انتخاب شده قرار می دهد. مثلا روی همه تگ های p یک جمله اضافه می چسبانی.

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

مشاهده در ادیتور

این شبیه این است که آخر هر خط دفتر، یک جمله تکراری بنویسی.

افزودن متن در ابتدای المنت ها با prepend()

متد prepend() برعکس append() عمل می کند. این متد متن یا HTML جدید را در ابتدای المنت قرار می دهد.

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

مشاهده در ادیتور

یعنی قبل از متن قبلی، یک متن تازه می نویسی؛ مثل نوشتن تیتر قبل از متن انشا.

ساخت و افزودن چند المنت جدید با append()

متدهای append() و prepend() می توانند چند المنت جدید را با هم بگیرند. این المنت ها می توانند با متن/HTML ساده، با خود jQuery یا با DOM ساخته شوند.

در مثال زیر، سه پاراگراف جدید می سازیم و هم زمان به body اضافه می کنیم.

function appendText() {
  var txt1 = "<p>Text.</p>";
  var txt2 = $("<p></p>").text("Text.");
  var txt3 = document.createElement("p");
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);
}

مشاهده در ادیتور

اینجا سه روش ساخت المنت را کنار هم می بینی و با یک append() همه را وارد صفحه می کنی.

افزودن محتوا قبل و بعد از المنت ها با after و before

متد after() متن یا HTML را بعد از المنت می گذارد. متد before() آن را قبل از المنت قرار می دهد.

در مثال منبع، قبل و بعد از یک تصویر متن می گذاریم.

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

مشاهده در ادیتور

این دقیقا مثل این است که بالای یک عکس کپشن بنویسی و زیرش توضیح اضافه کنی.

افزودن چند المنت جدید با after()

after() و before() هم مانند append() می توانند چند المنت مختلف را با هم بگیرند. می توانی بعضی را با HTML، بعضی را با jQuery و بعضی را با DOM بسازی.

در مثال زیر، سه بخش متن را کنار هم بعد از تصویر قرار می دهیم.

function afterText() {
  var txt1 = "<b>I </b>";
  var txt2 = $("<i></i>").text("love ");
  var txt3 = document.createElement("b");
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);
}

مشاهده در ادیتور

نتیجه این می شود که بعد از تصویر، جمله «I love jQuery!» را به صورت ترکیبی و استایل دار نشان می دهی.

گام های تمرینی برای افزودن محتوا (Add)

1. یک صفحه ساده با چند تگ p و یک img بساز.
2. اسکریپت jQuery را اضافه کن و مثال append() را روی همان pها تست کن.
3. سپس مثال prepend() را اضافه کن و تفاوت ابتدا و انتها را ببین.
4. یک دکمه بساز و تابع appendText() را روی رویداد کلیک آن صدا بزن.
5. در پایان، afterText() را روی img اجرا کن و نتیجه را بررسی کن؛ برای تنظیم و دریافت محتوا هم می توانی صفحات تنظیم محتوا (Set) و دریافت محتوا (Get) را دنبال کنی.

جمع بندی سریع

• افزودن محتوا در jQuery با append، prepend، after و before انجام می شود.
• append و prepend محتوا را داخل المنت، در انتها و ابتدا وارد می کنند.
• after و before محتوا را خارج از المنت و چسبیده به آن قرار می دهند.
• می توانی چند المنت جدید را هم زمان با یک متد اضافه کنی.
• با ترکیب دریافت، تنظیم و افزودن محتوا، کنترل کامل روی DOM خواهی داشت.