תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

הוספת אלמנטים לדף באמצעות 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

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מהם שלוש רשויות השלטון בישראל?