آموزش جی کوئری – افزودن محتوا در jQuery

  • آپدیت شده در تاریخ

آموزش جی کوئری

در بخش قبلی با متدهای Getter/Setter در jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه افزودن عناصر یا محتوای جدید با استفاده از jQuery می پردازیم.

 

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

جی کوئری چندین متد مثل append(), prepend(), html(), text(), before(), after(), wrap() ارایه داده است که به ما امکان افزودن محتوای جدید به یک المان را می دهد.

متدهای html() و text() را در بخش قبلی دیدیم. همچنین آموزش اضافه کردن محتوا با appendTo() را قبلا ارایه دادیم. بنابراین در اینجا بقیه موارد باقی را بررسی می کنیم.

 

متد append() جی کوئری

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

مثال زیر کد HTMLی را به همه پاراگراف های داخل سند اضافه می کند. همچنین با کلیک روی دکمه نیز متنی به عنصر دربرگیرنده اضافه می شود.

نکته: محتوا یا المان های قرار داده شده با متدهای append() و prepend() داخل المان انتخاب شده اضافه می شوند.

 

متد prepend() جی کوئری

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

مثال زیر کد HTMLی را به همه پاراگراف های داخل سند اضافه می کند. همچنین با کلیک روی دکمه نیز متنی به عنصر دربرگیرنده اضافه می شود.

 

افزودن چندین المان با متد append() و prepend()

متدهای append() و prepend() قابلیت پاس دادن چندین آرگومان به عنوان ورودی, را پشتیبانی می کنند.

کد جی کوئری زیر یک المان <h1>, <p> و <img> را به <body> به عنوان سه گره فرزند آخر اضافه می کند.

 

متد before() جی کوئری

متد before() در جی کوئری برای افزودن محتوا به قبل از المان های انتخابی استفاده می شود.

مثال زیر یک پاراگراف را قبل از عنصر دربرگیرنده اضافه می کنید. از طرف دیگر با کلیک روی دکمه می توانید یک تصویر را قبل از المان <h1> اضافه کنید.

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

 

متد after() جی کوئری

متد after() در جی کوئری برای افزودن محتوا به بعد از المان های انتخابی استفاده می شود.

مثال زیر یک پاراگراف را بعد از عنصر دربرگیرنده اضافه می کنید. از طرف دیگر با کلیک روی دکمه می توانید یک تصویر را قبل از المان <h1> اضافه کنید.

 

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

متدهای after() و before() قابلیت پاس دادن چندین آرگومان به عنوان ورودی, را پشتیبانی می کنند.

کد جی کوئری زیر یک المان <h1>, <p> و <img> را به <body> قبل از <p> اضافه می کند.

 

متد wrap() جی کوئری

متد wrap() در جی کوئری برای دربرگرفتن یک ساختار HTML برای المان های انتخابی اسفتاده می شود.

کد jQuery در مثال زیر المان های .container  را با المان <div> و کلاس .wrapper در بر می گیرد.

همچنین با کلیک روی دکمه می توانید تمام محتوای داخلی المان های پارارگراف را ابتدا با <b> و سپس المان <em> دربربگیرید.

به زبان ساده تر المان سلکت شده را داخل ساختار HTMLی که به عنوان مقدار آرگومان wrap() دادیم قرار می دهد.

 

امیدوارم در این بخش آموزش جی کوئری, از افزودن محتوا در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با نحوه حذف محتوا یا المان با جی کوئری, آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. رضا ۲ خرداد ۱۳۹۸

    سلام و وقت بخیر به شما

    اگه من بخوام برای تمام table هام یک container جدا بزارم به نظرتون استاندارد ترین کار چیه با جی کوئری

    پاسخ
    1. حسن شفیعی ۲ خرداد ۱۳۹۸

      سلام. ممنون.
      روش استاندارد, به کاربردن متد wrap هستش.
      $(‘table’).wrap(‘

      ‘);
      موفق باشید

      پاسخ
دوره های آموزشی