دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
این دوره شما رو از مفاهیم پایه تا مباحث پیشرفته مثل JavaScript، React و Next.js پیش می‌بره. با آموزش پروژه‌محور، یک فروشگاه اینترنتی کامل طراحی می‌کنید و برای ورود به بازار کار آماده می‌شید!
مشاهده بیشترمشخصات مقاله
-
2730
-
0.0
-
6348
-
0
-
0
آموزش متدهای append و prepend در جی کوئری
متدهای append() و prepend()
با امکانات کتابخانه ی jQuery می توان به راحتی المان های جدید به المان های جاری پیوست یا اضافه کرد. در این کتابخانه، متدهایی برای افزودن المان جدید به ابتدا/انتهای المان جاری، دریافت HTML به صورت رشته، المان های DOM و نیز اشیا جی کوئری به عنوان پارامتر وجود دارد. در مثال زیر خواهید دید افزودن المان های جدید به یک لیست با استفاده از توابع prepend و append چقدر آسان می باشد:
نمونه یک
1 2 3 4 5 6 | <a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a><a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a><ol id="olTestList1"> <li>Existing item</li> <li>Existing item</li></ol><button></button> |
در نمونه ی ذکر شده در بالا، دو لینک را مشاهده می کنید. اولین لینک یک آیتم جدید به انتهای المان li اضافه می کند. لینک دوم، برخلاف لینک اول، یک آیتم جدید به ابتدای المان li الحاق می نماید. در این مثال، صرفا یک قطعه HTML جدید درج می گردد. اما می توانستیم آیتم های جدید را توسط کد jQuery تولید کنیم یا آن را از طریق کد خالص جاوا اسکریپت و المان های DOM ایجاد نماییم. در واقع هر دو متد append() و prepend()، قادر به پذیرش تعداد نامحدودی المان به عنوان پارامتر می باشند. در مثال زیر، قابلیت پذیرش تعداد نامحدودی پارامتر و توانایی افزودن المان های جدید به اشکال مختلف را نمایش می دهیم:
نمونه دو
1 2 3 4 5 6 7 8 9 10 11 | <a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a><ol id="olTestList2"></ol><script type="text/javascript"> function AppendItemsToList() { var item1 = $("<li></li>").text("Item 1"); var item2 = "<li>Item 2</li>"; var item3 = document.createElement("li"); item3.innerHTML = "Item 3"; $("#olTestList2").append(item1, item2, item3); }</script><button></button> |
همان طور که مشاهده می کنید، item1 یک المان است که توسط jQuery ایجاد شده، item2 یک رشته ی ساده ی HTML و item3یک المان DOM تولید شده توسط javascript می باشد. این سه آیتم توسط متد append به انتهای المان li (لیست) پیوست شده است.
دو متد نام برده دارای مشتقاتی می باشند که عبارتند از:
- ()appendTo
- ()prependTo
این دو متد همان کار دو append و prepend را انجام می دهند اما به شیوه ای کاملا متفاوت.
مثال:
نمونه سه
1 2 3 4 5 6 7 8 | <a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a><ol id="olTestList3"></ol><script type="text/javascript"> function PrependItemsToList() { $("#olTestList3").prepend($("<li></li>").text("prepend() item")); $("<li></li>").text("prependTo() item").prependTo("#olTestList3"); }</script><button></button> |
در این مثال، آیتم هایی را به انتهای لیست اضافه می کنیم. همان طور که خود مشاهده می کنید، نتیجه یکسان است و تنها تفاوت این دو متد مشتق با متدهای اصلی، در ترتیب انجام کار خلاصه می شود.
امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.
اگر تمایل دارید به سایر محتوای آموزش برنامه نویسی دسترسی پیدا کنید می توانید به آموزش های گام به گام برنامه نویسی مراجعه کنید.
از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.