افزودن عناصر jQuery

با استفاده از jQuery، افزودن عناصر/محتوا بسیار آسان است.

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

ما چهار روش jQuery برای افزودن محتوا را یاد خواهیم گرفت:

  • append() - اضافه کردن محتوا در انتهای عنصر انتخاب شده
  • prepend() - اضافه کردن محتوا در ابتدای عنصر انتخاب شده
  • after() - اضافه کردن محتوا پس از عنصر انتخاب شده
  • before() - اضافه کردن محتوا قبل از عنصر انتخاب شده

روش append() jQuery

روش append() jQuery محتوا را در انتهای عنصر انتخاب شده اضافه می‌کند.

مثال

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

آزمایش کنید

روش prepend() jQuery

روش prepend() jQuery محتوا را در ابتدای عنصر انتخاب شده اضافه می‌کند.

مثال

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

آزمایش کنید

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

در مثال بالا، ما تنها در ابتدای/انتهای عنصر انتخاب شده متن/HTML را اضافه کردیم.

اما، روش‌های append() و prepend() می‌توانند با پارامترهای بی‌نهایت جدید پذیرفته شوند. می‌توان با استفاده از jQuery متن/HTML ایجاد کرد (مانند مثال بالا) یا با استفاده از کد JavaScript و عناصر DOM.

در مثال زیر، ما چندین عنصر جدید ایجاد می‌کنیم. این عناصر می‌توانند با استفاده از text/HTML، jQuery یا JavaScript/DOM ایجاد شوند. سپس ما این عناصر جدید را با استفاده از روش append() به متن اضافه می‌کنیم (برای 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);         // عناصر جدید را اضافه می‌کند
{}

آزمایش کنید

روش‌های after() و before() jQuery

روش after() jQuery محتوای جدید را در پس از عناصر انتخاب شده اضافه می‌کند.

روش before() jQuery محتوای جدید را در پیش از عناصر انتخاب شده اضافه می‌کند.

مثال

$("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("عشق ");     // با استفاده از jQuery عناصر جدید را ایجاد می‌کند
var txt3=document.createElement("big");  // با استفاده از DOM عناصر جدید را ایجاد می‌کند
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // در پس از img عناصر جدید را اضافه می‌کند
{}

آزمایش کنید

منابع 参考 jQuery HTML

برای اطلاعات کامل در مورد روش‌های HTML jQuery، لطفاً به منابع زیر مراجعه کنید: