jQuery – שינויים ב-HTML חלק א'

המאמר הקודם ללימו jQuery
המאמר הבא ללימוד jQuery

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

 
 
<div id="mydiv1" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton1">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton1").click(function () {
//פונקציה כלשהי
});
 });
</script>

פונקציה ה-html

הפונקציה html() די זהה ל-innerHTML למי שמכיר. באופן פשוט למדי היא יכולה לתת לי את כל ה-HTML של אלמנט מסוים כמחרוזת טקסט שעליה אני יכול לעשות מה שבא לי. קל מאד להשתמש בה: רושמים את הסלקטור המתאים עבור האלמנט שאני רוצה את ה-HTML שלו ואז .html().
שימושי בכמה מקרים – שימו לב איך ה-alert יקפיץ לי את כל ה-HTML שיש בתוך ה-div החביב:

אלמנט חביב

וככה זה נראה:


<div id="mydiv1" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton1">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton1").click(function () {
alert(
$("#mydiv1").html()
);
});
 });
</script></p>

אם בא לי לשנות את מה שיש בתוך ה-div או בתוך כל אלמנט אחר, אני משתמש בפונקציה הזו גם וכותב את כל מה שאני רוצה להכניס כפרמטר – למשל בואו וננסה להכניס את המחרוזת <b>אינטרנט ישראל</b> לתוך ה-div הצהוב:

אלמנט חביב

שימו לב שהטקסט מודגש כמובן, כי הכנסתי תגיות הדגשה. ככה זה נראה:


<div id="mydiv2" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton2">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton2").click(function () {
$("#mydiv2").html("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

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

פונקצית text

פונקצית text זהה כמעט לחלוטין לפונקצית html חוץ מכך שהיא לוקחת רק את הטקסט ללא תגיות html. אם אני אנסה להכניס באמצעות תגיות html מה שיקרה הוא ש-jQuery תבצע escaping ותגיות ה-html יוצגו. אני מתאר לעצמי שדוגמא תבהיר את העניינים. אני אשתמש בפונקציה שכתבתי לעיל, המכניסה טקסט מודגש ואשתמש במקום בפונקצית html, בפונקצית text:

אלמנט חביב

וככה זה נראה כמובן. השינוי היחידי הוא בטקסט:


<div id="mydiv3" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton3">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton3").click(function () {
$("#mydiv3").text("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

פונקצית text שימושית ביותר כאשר אני רוצה לחלץ טקסט מתוך אלמנט מסוים ולא בא לי להתחיל ולסנן את תגיות ה-html שיש בו.

פונקצית append

פונקצית append היא שימושית להפליא כאשר אני לא רוצה להחליף את הטקסט או את ה-HTML שיש בתוך אלמנט מסוים אלא רק להוסיף לו.

אלמנט חביב

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


<div id="mydiv4" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton4">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton4").click(function () {
$("#mydiv4").append("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

פונקצית appendTo

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

  • פריט מתוך רשימה
  • רשימה אחרת
  • רשימה אחרת
  • רשימה אחרת

וכך זה נראה כמובן בקוד:


<ul style="float: left">
<li id="original_list_item">פריט מתוך רשימה</li>
</ul>
<ul style="float: right" id="to_be_added">
<li>רשימה אחרת</li>
<li>רשימה אחרת</li>
<li>רשימה אחרת</li>
</ul>
<p><button id="myButton5">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton5").click(function () {
$("#original_list_item").append("#to_be_added");
});
 });
</script></p>

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

  • מה תרצה להזמין היום?
  • ביצים
  • גבינה
  • חלב
  • לחם
  • טונה
  • סל קניות

prepend & prependTo

בדיוק כמו append, רק שהטקסט/אלמנט מתווסף לפני ולא אחרי. וכמובן דוגמא היא הכרחית:

אלמנט חביב

וכך נראה הקוד:


<div id="mydiv6" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton6">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton6").click(function () {
$("#mydiv6").prepend("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

בסך הכל אין יותר מדי מה להסביר בנוגע ל-prepend או ל-prependTo, בדיוק כמו append.

After ו – insertAfter

מדובר בפונקציות שדומות ל-append רק שהן פועלות מחוץ לאלמנט. כלומר אם פונקצית append מוסיפה טקסט/HTML בתוך האלמנט ופונקצית appendTo מוסיפה אלמנט לתוך האלמנט, After מכניסה טקסט אחרי האלמנט (לא בתוכו) ו-insertAfter מכניסה אלמנט אחרי האלמנט.

נשמע מסובך? בוא וניקח את הפונקציה המוכרת שהשתמשנו בה ב-append וננסה להשתמש בפונקצית after:

אלמנט חביב

אפשר לראות שהפעם אינטרנט ישראל משתכפל מחוץ ל-div ולא בתוכו. הקוד יראה שכל מה שעשיתי זה להשתמש ב-

after:


<div id="mydiv7" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton7">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton7").click(function () {
$("#mydiv7").after("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

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

במאמר הבא אני ממשיך לפרט על מניפולציות נוספות ומעניינות שאפשר לעשות באמצעות jQuery.

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

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

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (3 הצבעות, ממוצע: 5.00 מתוך 5)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

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

רן בר-זיק

רן בר-זיקכותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי

הטוויטר שלי

פרופיל הפייסבוק שלי

אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.