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

אחד הדברים הטובים ב-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 החביב:

Do the Action

וככה זה נראה:

<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 הצהוב:

Do the Action

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

<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:

Do the Action

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

<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 שיש בתוך אלמנט מסוים אלא רק להוסיף לו.

Do the Action

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

<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

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

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

• רשימה אחרת
• רשימה אחרת
• רשימה אחרת

Do the Action

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

<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, רק שהטקסט/אלמנט מתווסף לפני ולא אחרי. וכמובן דוגמא היא הכרחית:

Do the Action

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

<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:

Do the Action

אפשר לראות שהפעם אינטרנט ישראל משתכפל מחוץ ל-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.