<div id="content>
<p class="first">פסקה ראשונה תוכן ... פסקה ראשונה תוכן...</p>
<p>פסקה שניה ...תוכן...פסקה שניה...תוכן...</p>
מדריך jQuery חלק ד' - פונקציות להוספה/הסרה דינמית של אלמנטים
הקדמה
בשיעור הקודם הראינו כיצד ניתן לשנות תכונות של אלמנטים בדף Html. בשיעור זה נראה איך לשנות את מבנה הדף באופן דינמי, ע"י הכנסת אלמנטים חדשים לדף או הסרת אלמנטים קיימים ממנו.
כל הפונקציות המשמשות להוספת אלמנטים שנסקור כאן פועלות באופן דומה. הן מגדירות שני דברים:
- מהו האלמנט החדש שנוסף לדף. האלמנט החדש יכול להיות מוגדר באחת מהדרכים הבאות:
- מחרוזת המכילה Html, לדוגמה:
'<p>this is my new content</p>'(ברוב המקרים נשתמש בשיטה זו)
- אובייקט jQuery, לדוגמה:
$('<p> example content</p>')
- אלמנט DOM, לדוגמא:
document.createTextNode("Hello")
- מחרוזת המכילה Html, לדוגמה:
- הגדרת מיקום ההכנסה -הגדרת אלמנט בדף שאחריו/לפניו/בתוכו יוכנס האלמנט החדש.
כמו כן, לכל הפונקציות הנ"ל קיימות שתי גירסאות, אשר זהות מבחינת פעולתן אך שונות מבחינת דרך הכתיבה שלהן. בראשונה האלמנט החדש מוגדר כפרמטר של הפונקציה והאלמנט המציין את המיקום מוגדר לפני שם הפונקציה (ע"י סלקטור), ובשניה הסדר הפוך - האלמנט החדש מוגדר לפני שם הפונקציה ואלמנט הייחוס למיקום ההכנסה מוגדר בפרמטר (בתוך הסוגריים של הפונקציה)
בדוגמאות הבאות נשתמש בקוד Html הפשוט הבא:
</div>
הוספת אלמנט אחרי אלמנט אחר - הפונקציות after, insertAfter
after()
בפונקציה זו נשתמש בכדי להכניס אלמנט חדש אחרי אלמנט קיים. לדוגמה, בקטע ה-Html למעלה נניח שברצוננו להכניס פסקה נוספת לאחר הפסקה הראשונה. נעשה זאת כך:
$('#content p.first').after('<p>תוכן חדש נוסף...</p>')
שימו לב שהאלמנט החדש מוגדר כפרמטר של הפונקציה, בעוד שאלמנט המיקום (הפסקה הראשונה) מוגדר ע"י הסלקטור המופיע לפני שם הפונקציה. השורה הנ"ל תיצור אלמנט <p> חדש, כולל התוכן הטקסטואלי, ותכניס אותו למסמך לאחר הפסקה הראשונה.
insretAfter()
זו פונקציה שפעולתה זהה לקודמת, רק בהיפוך הסדר. כאן הפסקה החדשה מוגדרת לפני הפעלת הפונקציה:
$('<p>תוכן חדש נוסף...</p>').insertAfter('#content p.first')
הדגמה:
פסקה ראשונה תוכן ... פסקה ראשונה תוכן...
פסקה שניה ...תוכן...פסקה שניה...תוכן...
הוספת אלמנט לפני אלמנט אחר - הפונקציות before, insertBefore
שתי הפונקציות הבאות דומות מאד לקודמות, ההבדל היחיד הוא מיקום האלמנט החדש - לפני אלמנט המיקום.
before()
בפונקציה זו נשתמש בכדי להכניס אלמנט חדש לפני אלמנט קיים. לדוגמה, בקטע ה-Html למעלה נניח שברצוננו להכניס פסקה נוספת בין שתי הפסקאות. נעשה זאת כך:
$('#content p:last').before('<p>תוכן חדש נוסף...</p>')
insretBefore()
זו פונקציה שפעולתה זהה לקודמת, רק בהיפוך הסדר:
$('<p>תוכן חדש נוסף...</p>').insertBefore('#content p:last')