
دوره جامع و پروژهمحور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژههای حرفهای مثل دیجیکالا و شمرون کباب مهارتت رو حرفهای کن!
مشاهده بیشتر
این دوره شما رو از مفاهیم پایه تا مباحث پیشرفته مثل JavaScript، React و Next.js پیش میبره. با آموزش پروژهمحور، یک فروشگاه اینترنتی کامل طراحی میکنید و برای ورود به بازار کار آماده میشید!
مشاهده بیشترمشخصات مقاله
آموزش افزودن عناصر در 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> الصاق کرده ایم: