JavaScript היא שפת תכנות רב-תכליתית המאפשרת יצירה ומניפולציה של האלמנטים כמו HTML (Hyper Text Markup Language). זה עוקב אחר השיטות 'append()' ו-'appendChild()' כדי לבצע פונקציונליות זו. כפי שהשם שלהם מרמז, שתי השיטות מצרפות את רכיבי ה-HTML כמו String או Node. עם זאת, הם שונים זה מזה בהתאם לפונקציונליות שלהם וגורמים אחרים.
מדריך זה מדגיש את ההבדלים העיקריים בין ה-jQuery ' לְצַרֵף ()' ו-JavaScript ' appendChild ()' שיטות.
לפני שנעבור להבדלים בין ה-jQuery ' לְצַרֵף ()' ו-JavaScript ' appendChild ()' שיטות, תחילה תסתכל על היסודות של שיטות אלה.
מהי שיטת jQuery append()?
ה-jQuery' לְצַרֵף שיטת ()' מכניסה את האובייקטים 'Node' ו-'String' הרצויים בסוף בתור הילד האחרון של אלמנט האב.
תחביר
$ ( בוחר ) . לְצַרֵף ( תוֹכֶן , פוּנקצִיָה ( אינדקס , html ) )בתחביר לעיל:
- תוֹכֶן : זה מתייחס לרכיבי HTML, רכיבי DOM או אובייקטי jQuery.
- פוּנקצִיָה : זהו פרמטר נוסף המציין את פונקציית ה-JavaScript המוגדרת על ידי המשתמש עם הפרמטרים 'אינדקס (מיקום אלמנט)' ו-'html (html (html של רכיבים נבחרים)).
מהי שיטת JavaScript appendChild()?
השיטה 'appendChild()' מוסיפה רק את האובייקט 'Node' אחרי הילד האחרון של אלמנט האב. תחילה הוא יוצר את אובייקט ה-Node הרצוי באמצעות שיטת 'createElement()' ולאחר מכן מוסיף אותו.
תחביר
אֵלֵמֶנט. appendChild ( צוֹמֶת )תחביר זה דורש פרמטר אחד בלבד, כלומר ' צוֹמֶת '.
כפי ששמותיהם מרמזים, השיטות שנדונו לעיל שונות זו מזו. סעיף זה מגלה כמה גורמים שבהם הם שונים. בואו נסתכל עליהם.
הבדלים בין שיטת jQuery append() ל-JavaScript appendChild() שיטת
| תנאים | jQuery append() | JavaScript appendChild() |
|---|---|---|
| נוֹהָג | ניתן להשתמש בו כדי להוסיף את רכיב האב על ידי הוספת 'חדש' צוֹמֶת ' ו' חוּט ' חפצים בו זמנית. | ניתן להשתמש בו רק כדי להוסיף את רכיב האב על ידי 'החדש' צוֹמֶת ' נוצר באמצעות ' createElement ()' שיטה. |
| אובייקטי צומת מרובים | ה ' לְצַרֵף שיטת ()' יכולה להוסיף מספר אובייקטי Node באלמנט האב המשויך לו בו-זמנית בפורמט הבא. פוּרמָט : 'div.append(firstchild, secondchild, 'Linuxhint');' |
ה ' appendChild ()' השיטה עובדת מצוין עם מספר אובייקטים של Node, אך היא מוסיפה רק את הילד הראשון בכל פעם ולאחר מכן את הבא. פוּרמָט : 'div.appendChild(firstchild, secondchild, 'Linuxhint');' |
| ערך החזרה | ה ' לְצַרֵף שיטת ()' אינה מחזירה את אובייקט ה-Node המצורף מכיוון שהיא מציגה ערך מוחזר 'לא מוגדר', כלומר. פוּרמָט : console.log(appendChildValue) // undefined |
מצד שני, ה' appendChild ()' השיטה מחזירה ערך המכיל את אובייקט ה-Node המצורף. פוּרמָט : console.log(appendChildValue) //
|
כעת עברו ליישום המעשי של ההבדלים העיקריים המפורטים.
הבדל 1: החלת שיטות jQuery append() ו-JavaScript appendChild()
לפי ההבדל הראשון, ' לְצַרֵף השיטה ()' מצרפת הן את הצומת והן את המחרוזת בעוד ששיטת ה-'appendChild()' מוסיפה רק אובייקטים של הצומת.
קוד HTML
ראשית, עיין בקוד ה-HTML המוצהר:
< גוּף >< h2 > שיטת jQuery 'append()'. < / h2 > //עבור append() < h2 > שיטת jQuery 'appendChild()'. < / h2 > //עבור appendChild()
< לַחְצָן תְעוּדַת זֶהוּת = 'btn1' בלחיצה = 'myFunc1()' > הוסף מחרוזת DOM < / לַחְצָן >
< לַחְצָן תְעוּדַת זֶהוּת = 'btn2' בלחיצה = 'myFunc2()' > הוסף צומת DOM < / לַחְצָן >
< ע תְעוּדַת זֶהוּת = 'ל' > זו פסקה. < / ע >
< ol תְעוּדַת זֶהוּת = 'רשימה' >
< זֶה > מדריך JavaScript 1 < / זֶה >
< זֶה > מדריך JavaScript 2 < / זֶה >
< זֶה > מדריך JavaScript 3 < / זֶה >
< / ol >
< / גוּף >
בשורות הקוד לעיל:
- התג '
' מגדיר את כותרת המשנה של רמה 2.
- התגים '
- התג '
' יוצר פסקה ריקה עם מזהה מוקצה 'para' כדי להציג את ערך המחרוזת המצורפת.
- התג '
- ' מוסיף רשימה מסודרת עם מזהה 'list', ואת הפריטים הרשומים בעזרת תגיות '
- '.
הערה : עקוב אחר קוד ה-HTML שנכתב לעיל בהבדל הראשון של שתי המתודות 'append()' ו-'appendChild()'.
שיטת 'append()' jQuery Code
ראשית, סקירה כללית של קוד jQuery של שיטת 'append()':
< רֹאשׁ >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > תַסרִיט >
< תַסרִיט >
$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( '#btn1' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( 'פ' ) . לְצַרֵף ( ' מחרוזת נוספה .' ) ;
} ) ;
$ ( '#btn2' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( 'אול' ) . לְצַרֵף ( '
} ) ;
} ) ;
תַסרִיט >
רֹאשׁ >
בשורות הקוד לעיל:
- ראשית, ציין את ה-jQuery ' CDN 'נתיב מהאתר הרשמי שלה' https://jquery.com/ 'בעזרת ה' src ' תכונה.
- לאחר מכן, הוסף קטע סקריפט קטן שמשתמש תחילה ב-' מוּכָן שיטת ()' כדי להפעיל את ' פוּנקצִיָה ()' כאשר מסמך ה-HTML נטען.
- לאחר מכן, ה' נְקִישָׁה שיטת ()' מבצעת את הפונקציה המקושרת עם הכפתור שהמזהה שלו הוא ' btn1 ' בלחיצה על הכפתור.
- בהגדרת הפונקציה, ' לְצַרֵף שיטת ()' משמשת להוספת רכיב הפסקה הממוקד עם המחרוזת המוצהרת.
- אותו תהליך נעשה עבור התוספת ' רשימה מסודרת ' כלומר, אובייקט Node כדי לצרף אותו לפריט הנתון.
תְפוּקָה
כאן, מאושר שגם האובייקט 'String' וגם 'Node' מצורפים בעזרת שיטת 'append()'.
קוד JavaScript של שיטת 'appendChild()'.
כעת, תסתכל על שיטת JavaScript 'appendChild()' באופן מעשי:
< תַסרִיט >פוּנקצִיָה myFunc1 ( ) {
ל. appendChild ( '
מחרוזת נוספה
' ) //הוסף מחרוזת DOM} פוּנקצִיָה myFunc2 ( ) {
const אֵלֵמֶנט = מסמך. createElement ( 'זֶה' ) ;
const צוֹמֶת = מסמך. createTextNode ( 'פריט מצורף' ) ;
אֵלֵמֶנט. appendChild ( צוֹמֶת ) ; //הוסף DOM Node
const אֵלֵמֶנט = מסמך. getElementById ( 'רשימה' ) ;
אֵלֵמֶנט. appendChild ( אֵלֵמֶנט ) ;
}
תַסרִיט >
בקטע הקוד שלמעלה:
- הגדר שם פונקציה ' myFunc1 ()' שמשתמש בשיטת 'appendChild()' כדי להוסיף את הפסקה שנוספה עם המחרוזת הנתונה.
- לאחר מכן, ב' myFunc2 ()', השיטה 'createElement()' יוצרת רכיב רשימה חדש ולאחר מכן מוסיפה לו טקסט כלשהו באמצעות שיטת 'createTextNode()'.
- לאחר מכן, הוסף את צומת הרשימה שנוצרה עם הטקסט שלו באמצעות שיטת 'appendChild()'.
- לבסוף, הוסף את הרשימה החדשה שנוצרה Node לרשימה המוסדרת שהגישה אליה היא המזהה הוא 'list' בעזרת שיטת 'appendChild()'.
תְפוּקָה
כפי שניתן לראות, רק האובייקט 'צומת' מתווסף בלחיצת הכפתור, לא ה'מחרוזת'.
שְׁגִיאָה
לחץ על 'F12' כדי לפתוח את מסוף האינטרנט ולבדוק את הבעיה:
כפי שניתן לראות, המסוף מציג שגיאה בהוספת אובייקט String באמצעות שיטת 'appendChild()'. לפיכך, אושר כי המתודה 'appendChild()' אינה מצרפת אובייקט String.
הבדל 2: החלת שיטות jQuery append() ו-JavaScript appendChild() על אובייקטי צומת מרובים
ניתן לנתח את ההבדל השני בין שיטות 'append()' ו-'appendChild()' על ידי ביצוע שיטות אלו על מספר אובייקטים של צומת. כדי לראות את היישום המעשי שלו, עקוב אחר הקודים המפורטים.
קוד HTML
בוא נעבור על קוד ה-HTML:
< div תְעוּדַת זֶהוּת = 'החלק הראשי' >< div סִגְנוֹן = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > אחד < / div >
< div סִגְנוֹן = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > שתיים < / div >
< div סִגְנוֹן = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > שְׁלוֹשָׁה < / div >
< / div >
כאן, שורות הקוד שלמעלה מכילות רכיב '
הערה : קוד ה-HTML שנכתב לעיל מלווה בהבדל השני של שתי המתודות 'append()' ו-'appendChild()'.
שיטת append()
כעת, המשך עם התסריט הבא:
< תַסרִיט >const maindiv = מסמך. getElementById ( 'החלק הראשי' ) ;
const div4 = מסמך. createElement ( 'div' ) ;
div4. innerHTML = 'ארבע' ;
div4. סִגְנוֹן . צבע רקע = 'וָרוֹד' ;
div4. classList . לְהוֹסִיף ( 'div' ) ; const div5 = מסמך. createElement ( 'div' ) ;
div5. innerHTML = 'חָמֵשׁ' ;
div5. סִגְנוֹן . צבע רקע = 'וָרוֹד' ;
div5. classList . לְהוֹסִיף ( 'div' ) ;
maindiv. לְצַרֵף ( div4 , div5 ) ;
תַסרִיט >
בקטע הקוד שלמעלה:
- המשתנה 'maindiv' ניגש ל-'div' שנוסף באמצעות המזהה שלו 'main-div' בעזרת שיטת 'getElementById()'.
- לאחר מכן, שיטת 'createElement()' יוצרת אובייקט צומת 'div' חדש, מוסיפה את הטקסט שצוין באמצעות המאפיין 'innerHTML', ומחילה את צבע הרקע באמצעות המאפיין 'style.backgroundcolor'.
- לאחר מכן, השיטה 'add()' מוסיפה לה את מאפייני המחלקה CSS שצוינו באמצעות המאפיין 'classList'.
- אותו הליך מתבצע עבור רכיב ה'' החדש שנוצר.
- לבסוף, שני אובייקטי ה-Node החדשים שנוצרו מתווספים בו-זמנית בעזרת שיטת 'append()'.
תְפוּקָה
כאן, אובייקטי ה-Node מרובים שנוצרו לאחרונה מתווספים לאותו אלמנט אב בהתאם.
שיטת 'appendChild()'.
לאחר מכן, המשך בשיטה 'appendChild()':
< תַסרִיט >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
תַסרִיט >כפי שניתן לראות, שיטת 'appendChild()' מוסיפה מספר אובייקטי Node אחד אחד לאותו אלמנט אב.
תְפוּקָה
הפלט זהה לשיטת 'append()' אך שונה בציון אובייקטי ה-Node.
הבדל 3: ערך החזרה של השיטות Applied jQuery append() ו-JavaScript appendChild()
ההבדל האחרון הוא 'הערך המוחזר' של השיטות 'append()' ו-'appendChild()'. בוא נראה את זה באופן מעשי.
הערה : קוד ה-HTML זהה ל-Difference 2 (Multiple Node Objects).
שיטת 'append()'.
תסתכל על שורות הקוד הנתונות:
< תַסרִיט >
לְנַחֵם. עֵץ ( maindiv. לְצַרֵף ( div4 ) ) ;
תַסרִיט >כאן, השיטה 'console.log()' מופעלת כדי לבדוק את הערך המוחזר של שיטת 'append()' תוך הוספת אובייקט ה-Node שצוין.
תְפוּקָה
לחץ על 'F12' כדי לפתוח את מסוף האינטרנט:
כפי שניתן לראות, הערך המוחזר של שיטת 'append()' הוא ' לא מוגדר '.
שיטת appendChild().
כעת, שקול את הקוד הבא תוך שימוש בשיטת 'appendChild()':
< תַסרִיט >
לְנַחֵם. עֵץ ( maindiv. appendChild ( div4 ) ) ;
תַסרִיט >ציין את השיטה 'appendChild()' עם השיטה 'console.log()' זהה לשיטת 'append()'.
תְפוּקָה
כאן, הפלט מחזיר את האלמנט המצורף HTML כולל מאפייני הסגנון במקום.
סיכום
ה-jQuery' לְצַרֵף ()' וה-JavaScript ' appendChild ()' שיטות שונות על בסיס ' תחבירים', 'שימוש' ו'אובייקטי צומת מרובים '. יתר על כן, שלהם ' ערכים שהחזירו ' גם שונים זה מזה. שתי השיטות שימושיות והשימוש בהן תלוי בבחירות המשתמש. מדריך זה פירט את ההבדל בין ה-jQuery ' לְצַרֵף ()' וה-JavaScript ' appendChild שיטת ()' מעשית.