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

آموزش افزودن عناصر در jQuery

دوره های مرتبط با این مقاله

با پا به عرصه گذاشتن jQuery، افزودن عناصر/محتوای HTML جدید به طور چشمگیری آسان شد.

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

در این مبحث به تشریح چهار متد که برای افزودن المان جدید با آن ها سروکار داریم خواهیم پرداخت:

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

متد ()append

این متد به منظور افزودن محتوای جدید به انتهای عناصر انتخابی بکار می رود.

نمونه یک

 
امتحان کنید

متد ()prepend

جهت الحاق کردن محتوای جدید به ابتدای المان های انتخاب شده مورد استفاده قرار می گیرد.

نمونه دو

امتحان کنید

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

همان طور که مشاهده می کنید در هر دو نمونه ی فوق به انتها یا ابتدای المان های انتخابی تنها یک مقدار پیوست شده است.
اما تعداد المان هایی که به عنوان پارامترهای ورودی می توان به دو متد append() و prepend() ارسال کرد می تواند نامحدود باشد. عنصر جدید را می توان مانند یک متن HTML جدید به متدهای append() و prepend()اعلان کرد (مانند آنچه در مثال های فوق انجام دادیم)، اما با jQuery و جاوا اسکریپت نیز می توان المان جدید را ساخته و تعریف کرد.
در این مثال به سه روش مختلف، سه المان <p> ساخته، سپس با استفاده از متد ()append آنها را به انتهای تگ <body> ضمیمه کرده ایم(برای متد prepend نیز قابل استفاده می باشد):

نمونه سه

امتحان کنید

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

متد after() محتوای جدید را بعد از المان های انتخابی HTML درج می کند.
متد before() محتوای جدید را قبل از المان های انتخابی HTML درج می کند.

نمونه چهار

امتحان کنید

اضافه کردن چند عنصر جدید با متدهای ()after و ()before

پارامترهای ورودی، در دو متد ()after و ()before نیز می تواند نامحدود باشد.به عبارت دیگر تعداد المان هایی که به عنوان پارامترهای ورودی می توان به دو متد ()after و ()before ارسال کرد می تواند نامحدود باشد.
در نمونه ی زیر به سه روش مختلف سه المان جدید ایجاد کرده، سپس به کمک ()after آنها را به بعد از تگ <img> الصاق کرده ایم:

نمونه پنج

 
امتحان کنید
  • 1508
  •    1744
  • تاریخ ارسال :   1394/07/30

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش افزودن عناصر در jQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .