آموزش برنامه نویسی
خانه مقالات JavaScript حذف و اضافه عناصر HTML در صفحه با جاوا اسکریپت

حذف و اضافه عناصر HTML در صفحه با جاوا اسکریپت

نویسنده روح الله حسینی

در این پست نحوه حذف و اضافه کردن عناصر HTML در صفحه با جاوا اسکریپت به صورت داینامیک و بدون استفاده از جی‌کوئری رو به زبان ساده آموزش می‌دهیم.

اکثر اوقات با دو فانکشن ()addElement و ()removeElement که باهم بررسی‌شون می‌کنیم کارتون راه می‌افته، اما در پروژه‌های پیچیده‌تر ممکنه لازم باشه که کدها رو مطابق نیازتون تغییر بدید.

 

اضافه کردن عناصر در صفحه به صورت داینامیک

فهمیدن نحوه کار فانکشن ()addElement وابسته به فهمیدن و درک کردن آرگومان‌هایی هست که می‌گیره.

نحوه عملکردش به این شکل هست که یک عنصر فرزند (child element) جدید میسازه و اون رو به یک عنصر والد (parent element) دیگه اضافه می‌کنه.

عنصر والد یا parent element رو با آرگومان parentId مشخص می‌کنیم.

نوع عنصری که قصد داریم بسازیم رو با آرگومان elementTag مشخص می‌کنیم.

آیدی عنصر جدید رو هم با آرگومان elementId مشخص می‌کنیم.

در آخر innerHTML عنصر جدید رو با استفاده از آرگومان html تعریف می‌کنیم.

 

همون طور که در مثال زیر مشاهده خواهید کرد با استفاه از آرگومان آخر می‌تونید عناصر دیگه‌ای رو هم به عنصر جدیدتون وارد کنید.

 

حذف عناصر به صورت داینامیک

از اونجایی که برای حذف کردن element-ها فقط به آیدی اون element نیاز داریم کارمون خیلی آسون‌تر هست.

 

مثال

بیاید با هم فرمی شبیه به یکی از فرم‌های ضمیمه فایل Gmail بسازیم. در فرمی که می‌سازیم کاربر می‌تونه هر چندتا فایل که نیاز داشته باشه آپلود کنه.

اول بیایم نگاهی به HTML بندازیم.

 

که چیزی شبیه به این ایجاد می‌کنه: فرم آپلود


 

حالا باید فانکشن ()addFile که با کلیک کاربر روی دکمه “Add File” فراخوانده میشه رو ایجاد کنیم.

 

همونطور که میبینید به جای استفاده از فانکشن ()addElement برای ایجاد یک عنصر input جدید از نوع فایل، از این فانکشن استفاده می‌کنیم تا یک عنصر p جدید که خودش شامل عنصری از نوع input file هست رو ایجاد کنیم.

به این شکل عنصر p به عنوان یک محفظه عمل میکنه و این اجازه رو بهمون میده تا لینکی رو برای حذف هر کدام از عناصر input کنار هرکدام‌شان اضافه کنیم.

با کلیک بر روی دکمه “Add File” یک عنصر p جدید و محتویاتش به عنصر div با آیدی files اضافه میشه: حذف عناصر از فرم


منبع
Adding and Removing Elements on the Fly Using JavaScript – abeautifulsite.net

مقالات مرتبط

کامنت بگذارید