متد clone در jQuery (اضافه کردن المنت HTML)

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

متد clone در jQuery (اضافه کردن المنت HTML)

در این آموزش قصد داریم به شما نحوه کپی و قرار دادن یک المنت HTML را بصورت داینامیک نشان بدیم.

این قابلیت کلون کردن در بسیاری از سایت ها برای افزون مطلب , تصویر و .. موثر است . در شبکه های اجتماعی مثل فیسنما و یا کلوب دیده اید که می توانید چندین فیلد تصویر را فقط با یک کلیک اضافه و حذف کنید یا اینکه در قسمت افزون لینک دانلود ووکامرس و … که به شما قدرت عمل بیشتری در کنترل مقدار فیلد های مورد نیاز کاربر را می دهد.

در این مثال , ما از متد clone در jQuery جی کوئری برای کپی گرفتن المنت HTML استفاده کردیم. و سپس با استفاده از تابع insert آن را به اگ Div دلخواه اضافه (append) کردیم .

متد clone در jQuery (اضافه کردن المنت HTML)

تکست باکس HTML

کد زیر شامل input هایی برای نام و قیمت محصول است . این المنت های input برای افزودن چندین محصول با دکمه Add More اضافه خواهند شد.

متد clone در jQuery

در اسکریپت زیر, از توابع clone و insert برای افزون داینامیک تکست باکس ها به فرم محصول بهره می بریم. همچنین می توانستیم به جای استفاده از تابع insert , از appendTo که در مقاله آموزشی اضافه کردن محتوا در jQuery اشاره کردیم استفاده کنید.

متد clone در jQuery (اضافه کردن المنت HTML)

امیدوارم از آموزش متد clone در jQuery (اضافه کردن المنت HTML) نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

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

موفق و پیروز باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

دوره های آموزشی