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

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

המתודה 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.

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

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

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