افزودن عناصر 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("love ");     // از طریق jQuery عناصر جدید را ایجاد کنید
var txt3=document.createElement("big");  // از طریق DOM عناصر جدید را ایجاد کنید
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // در img بعد از آن عناصر جدید را وارد کنید
{}

آزمایش کنید

منابع مرجع jQuery HTML

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