اضافه‌کردن عنصرها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

به کمک jQuery، اضافه‌کردن عنصرها/محتوای جدید آسان است.[۱]

اضافه‌کردن محتوای HTML جدید

چهار متد را که برای اضافه‌کردن محتوای جدید استفاده می‌شوند را بررسی خواهیم کرد:

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

متد append() در jQuery

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

مثال
$("p").append("Some appended text.");

متد prepend() در jQuery

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

مثال
$("p").prepend("Some prepended text.");

اضافه‌کردن چند عنصر جدید با append() و prepend()

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

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

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

مثال
1 function appendText() {
2   var txt1 = "<p>Text.</p>";               // Create element with HTML 
3   var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
4   var txt3 = document.createElement("p");  // Create with DOM
5   txt3.innerHTML = "Text.";
6   $("body").append(txt1, txt2, txt3);      // Append the new elements
7 }

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

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

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

مثال
1 $("img").after("Some text after");
2 
3 $("img").before("Some text before");

اضافه‌کردن چند عنصر با after() و before()

همچنین هر دو متد after() و before() می‌توانند تعداد نامحدودی عنصر را بعنوان پارامتر بپذیرند. عنصرهای جدید با text/HTML (مانند آنچه در مثال بالا انجام شده‌است)، با jQuery، یا با عنصرهای DOM و کد جاوا اسکریپت تولید می‌شوند.

در مثال زیر، ما عنصرهای جدید تولید می‌کنیم. این عنصرها با text/HTML، جی کوئری و جاوا اسکریپت/DOM تولید می‌شوند. سپس عنصرهای جدید را با متد after() (می‌توان از before() هم استفاده کرد) به متن اضافه می‌کنیم:

مثال
1 function afterText() {
2   var txt1 = "<b>I </b>";                    // Create element with HTML 
3   var txt2 = $("<i></i>").text("love ");     // Create with jQuery
4   var txt3 = document.createElement("b");    // Create with DOM
5   txt3.innerHTML = "jQuery!";
6   $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
7 }

تمرین‌های jQuery

مرجع jQuery HTML

برای مرور کامل همه متدهای jQuery HTML، لطفاً به مرجع جی کوئری HTML/CSS مراجعه کنید.



منابع آموزشی