נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

הוספת אלמנטים לדף באמצעות jQuery

מחבר:
בתאריך:

jQuery מצטיין בהוספת אלמנטים של HTML ל-DOM (כך מכונה דף אינטרנט ב-javascript), ובהעתקת האלמנטים ממקום למקום בדף. במדריך זה נלמד על שתי סוגי מתודות שזה תפקידן, מתודות משבצות ומתודות ממקמות. מתודות משבצות, דוגמת ()append ו-()prepend, מכניסות אלמנטים בתחילתו או בסופו של אלמנט HTML קיים. לעומתן, מתודות ממקמות, דוגמת before() ו-after(), ממקמות אלמנטים מחוץ לאלמנטים שכבר קיימים בדף.

אם נושא ה-jQuery או javascript זר לכם לחלוטין, אז מומלץ שתתחילו מקריאת המדריכים: מבוא ל-jQuery, יסודות תחביר ה-jQuery ו אירועים ב-jQuery.

 

שיבוץ אלמנטים של HTML לתוך אלמנט קיים באמצעות prependTo() ו-appendTo()

כדי לשבץ אלמנט חדש ל-DOM בתחילתו של אלמנט קיים, נשתמש ב-appendTo().

ההטמ"ל המקורי:

<div id="main_div">ב
<p>זו פסקה ראשונה שקיימת בדף<br />
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
</div>

 

קוד ה-jQuery:

$('<h2></h2>', {
text: "כותרת שהתווספה באמצעות jQuery",
class: "appended_headline",
}).prependTo('div#main_div');

כדאי לשים לב, להפרדה בין הטקסט ובין התגיות <h2> שעוטפות אותו. בנוסף, המתודה הזו מאפשרת להוסיף תכונות כדוגמת class ו-dir, ושאר תכונות שמקובל להוסיף לתוך תגיות ה-HTML.

 

כשנריץ את הקוד, הוא יגרום לשיבוץ כותרת מסוג h2 בתוך הדיב, ממש בתחילתו. כך זה נראה ברמת ההטמ"ל (החלק שנוסף מודגש):

<"div id="main_div>
<h2 class="appended_headline">        
jQueryכותרת שנוספה באמצעות
<h2>
<p>זו פסקה ראשונה שקיימת בדף<br /> וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
</div>

 

לחצו על הכפתור להדגמת הקוד:

זו פסקה ראשונה שקיימת בדף
וזה המשכה של הפסקה הראשונה

פסקה שנייה

לחץ עליי!

 

כדי להוסיף אלמנט חדש ל-DOM לסופו של אלמנט קיים, נשתמש ב-prependTo()

 

ההטמ"ל המקורי:

<div id="main_div">
<p>זו פסקה ראשונה שקיימת בדף<br />
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
</div>

 

קוד ה-jQuery:

$('<p></p>', {
    text: פסקה שנוסיף לדף באמצעות" jQuery",
    class: "appended_paragraph',
    dir: "rtl"
}).appendTo('div#main_div');

 

והתוצאה:

שיבוץ הפסקה החדשה לסופו של הדיב. החלק שהתווסף מודגש

<div id="main_div">
<p>זו פסקה ראשונה שקיימת בדף<br>
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
<p class="appended_paragraph" dir="rtl">פסקה שנוסיף לדף באמצעות jQuery</p>
</div>

 

הדגמה של הקוד:

זו פסקה ראשונה שקיימת בדף
וזה המשכה של הפסקה הראשונה

פסקה שנייה

לחץ עליי!

 

לסיכום, prependTo() ו-appendTo() משבצים אלמנטים לתוך אלמנט קיים. prependTo() לתחילתו של אלמנט, ו- appendTo() לסופו של אלמנט.

 

המתודות prepend() ו-append()

את אותה מלאכה של שיבוץ אלמנטים שנוצרים עם jQuery לתוך אלמנט הטמ"ל קיים ניתן לבצע גם באמצעות append() ו-prepend(), ובתחביר שונה מעט.

דוגמת הקוד הבאה משבצת פסקה לסופו של הדיב באמצעות append():

$("div#main_div").append("<p>Appended paragraph.</p>");

 

העתקת אלמנטים ממקומם באמצעות prependTo() ו-appendTo()

כפי שניתן לשבץ אלמנטים שאנחנו יוצרים באמצעות המתודות prependTo() ו-appendTo(), ניתן להשתמש באותן מתודות כדי להעתיק אלמנטים, ולשבצם מחדש. בדוגמה זו, ניקח את הפסקה הראשונה ונשבץ לתוך הדיב לסופו, באמצעות appendTo().

 

ההטמ"ל:

<div id="main_div">
<p>זו פסקה ראשונה שקיימת בדף<br />
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
</div>

 

קוד ה-jQuery, שמעתיק את הפסקה, ומשבץ בסופו של הדיב:

$("p#toBeAppended").appendTo('div#main_div');

 

והתוצאה, שהפסקה משנה את מקומה בדף, ועוברת לסוף הדיב:

<div id="main_div">
<p>זו פסקה ראשונה שקיימת בדף<br>, 
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
<p id="toBeAppended">To be appended</p>
</div>

 

כאן תוכלו לראות הדגמה של הקוד:

To be appended פסקה

זו פסקה ראשונה שקיימת בדף
וזה המשכה של הפסקה הראשונה

פסקה שנייה

לחץ עליי!

 

המתודה prependTo() עובדת בצורה דומה, מעתיקה אלמנט קיים, אבל משבצת בתחילתו של אלמנט אחר.

 

עד כה ראינו כיצד ניתן לשבץ אלמנטים לתוך אלמנט קיים בדף באמצעות המתודות prependTo() ו-appendTo(), ובחלקו השני של המדריך נלמד כיצד להוסיף אלמנטים מחוץ לאלמנטים קיימים בדף באמצעות  insertAfter(), before(), after(), insertBefore().

 

מיקום אלמנטים של HTML בדף באמצעות insertBefore() ו-insertAfter()

 

ההטמ"ל:

<div id="main_div">
<p>זו פסקה ראשונה שקיימת בדף<br />
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
</div>

 

קוד שמוסיף אלמנטים לפני אלמנטים שקיימים בדף באמצעות insertBefore():

$('<h2></h2>', {
          text: "כותרת להוספה",
          class: "appended_headline"
}).insertBefore('div#main_div');

 

ההטמ"ל לאחר פעולת ה-jQuery:

<h2 class="appended_headline">כותרת להוספה</h2>
<div id="main_div">
<p>זו פסקה ראשונה שקיימת בדף<br>
וזה המשכה של הפסקה הראשונה</p>
<p>פסקה שנייה</p>
</div>

 

הדגמה של הקוד:

זו פסקה ראשונה שקיימת בדף
וזה המשכה של הפסקה הראשונה

פסקה שנייה

לחץ עליי!

 

insertAfter() , פועל בדומה ל-insertBefore() , ובהתאם לשמו מוסיף אלמנט חדש אחרי אלמנט קיים.

 

כפי שניתן להוסיף אלמנטים חדשים באמצעות insertAfter() ו-insertBefore(), ניתן להעתיק אלמנטים ממקומם בדף, ולמקם במקום אחר. דוגמת הקוד הבאה, מעבירה את הפסקה השנייה לפני הראשונה ועושה זאת באמצעות insertBefore().

$("div#main_div p:nth-child(2)").insertBefore('div#main_div p:nth-child(1)');

 

הדגמה של הקוד:

זו פסקה ראשונה שקיימת בדף
וזה המשכה של הפסקה הראשונה

פסקה שנייה

לחץ עליי!

 

שימו לב לשימוש בסלקטורים של CSS3 כדי להבחין בין הפסקה הראשונה והשנייה (לקריאת מדריך על סלקטורים של CSS3).

 

insertAfter() , בדומה ל-()insertBefore ממקם אלמנטים של HTML מחוץ לאלמנטים שקיימים בדף, אולם אחרי האלמנטים הקיימים.

 

המתודות before() ו-after()

המתודות before() ו-after() מאפשרות, בדומה ל- insertBefore() ו-insertAfter() , למקם אלמנטים בדף מחוץ לאלמנטים אחרים. ההבדל הגדול הוא בכך שמתודות אילו אינן מאפשרות להעתיק אלמנטים קיימים, אלא רק לעשות מניפולציה של אלמנטים שיוצר jQuery.

דוגמת הקוד הבאה ממקמת אלמנט שנוצר באמצעות ()before:

$("div#main_div").before('<h2>כותרת חדשה באמצעות jQuery</h2>');

משמעות הקוד – מקם את הכותרת h2 לפני הדיב.

 

לחצו על הכפתור להדגמת פעולת המתודה ()before:

זו פסקה ראשונה שקיימת בדף
וזה המשכה של הפסקה הראשונה

פסקה שנייה

לחץ עליי!

 

לסיכום

ראינו כיצד ניתן לשבץ ולמקם אלמנטים של HTML באמצעות jQuery. המתודות המשבצות הן: ()append()prepend(), appendTo ו-()prependTo, והן משבצות בתחילתו או בסופו של אלמנט שקיים בדף. המתודות עם To יכולות להעביר אלמנט ממקומו בדף וגם לשבץ אלמנט שיוצרים באמצעות jQuery, בעוד שתי המתודות הנותרות יכולות לשבץ אך ורק אלמנטים שנוצרים באמצעות jQuery. המתודות הממקמות: ()after()before()insertAfter ו- ()insertBefore, ממקמות אלמנט מחוץ לאלמנט קיים, לפני האלמנט הקיים או בסופו. המתודות שבשמן מופיע insert מסוגלות להעתיק אלמנטים קיימים ולמקם מחדש, כמו גם למקם אלמנטים שנוצרים באמצעות jQuery. שתי המתודות הנותרות יכולות רק למקם אלמנטים שנוצרו באמצעות jQuery.

 

המתודה מאפשר הוספת אלמנט חדש לדף מוסיף מחוץ או בתוך אלמנט קיים האם מעתיק אלמנט קיים ממקומו?
after() כן מחוץ לא
insertAfter() כן מחוץ כן
before() כן מחוץ לא
insertBefore() כן מחוץ כן
       
append() כן לתוך לא
appendTo() כן לתוך כן
prepend() כן לתוך לא
prependTo() כן לתוך כן
 

 

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

 

 

הוסף תגובה חדשה

 

= 5 + 8