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.

פוסטים נוספים שכדאי לקרוא

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד