כל מה שאתה צריך לדעת על HTML פנימי ב- JavaScript

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

• מבוא ל- JavaScript
• HTML פנימי ב- JavaScript
  • רשימה מסודרת או לא מסודרת
  • שינוי כתובת האתר

מבוא ל- JavaScript

JavaScript משמש כשפת תכנות בצד הלקוח כמו גם כשפת תכנות בצד השרת. משמש לביצוע בצד הלקוח כמו גם בצד השרת של כל יישום. ניתן לכנות צומת גם בשם Node.js בכמה מקומות.

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

HTML פנימי ב- JavaScript

הפנימי מאפיין ב- JavaScript הוא אחד המאפיינים השימושיים ביותר והוא נמצא בשימוש נרחב בכדי לספק היבט דינמי ורב-תכליתי יותר לדפי האינטרנט שנוצרים.

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

זה אולי נשמע קצת קשה אבל בואו ננסה להבין את זה בעזרת דוגמה.

דוגמא:

 
לחץ כאן כדי לשנות את הטקסט הפנימי HTML.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'הפסקה שונתה!' }

כאן בקוד שלעיל, בתג הפסקה מזהה זה הוא סעיף 1.

יש פוּנקצִיָה בשם myfunction () אשר יבוטל בלחיצה על הטקסט 'לחץ כאן כדי לשנות טקסט HTML פנימי'.כאשר הפונקציה מבוטלת עם הלחיצה, הפונקציה מתבצעת שאומרת getElementById ('פסקה 1'), שקבע כי יש לבחור את האלמנט עם ה- Id כהדגמה.

יתר על כן, יש לנו את הפונקציה הפנימית HTML שפירושה בפשטות לאחר הקלקה מה יש לעשות. הנה בדוגמה שלעיל, זה פשוט 'סעיף שונה'.

להלן הפלט הראשוני של הקוד הנ'ל.

להלן הפלט שהשתנה לאחר הקליק.

HTML פנימי עם רשימה מסודרת או לא מסודרת

להלן דוגמה להצגת השימוש ב- innerHTML עם רשימה מסודרת או לא מסודרת.

דוגמא:

 
 
שלום
 
שוב שלום
 
 
לחץ על הלחצן למטה כדי לקבל את התוכן של אלמנט ul.
נסה את הפונקציה helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

כאן ה- HTML הפנימי מופעל על ידי הכפתור המוגדר בשם 'נסה זאת'.

הפלט הראשוני של הטקסט הנ'ל הוא:

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

InnerHTML לשינוי כתובת ה- URL

להלן דוגמה נוספת המציגה את השימוש ב- innerHTML לשינוי כתובת ה- URL בלחיצת כפתור.

דוגמא:

  ויקיפדיה שנה פונקציית קישור myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ). target = '_ blank'}

הדוגמה שלעיל נותנת בתחילה את הקישור לאתר ויקיפדיה אך כאשר לוחצים על הכפתור הקישור משתנה לגוגל.

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

מה זה אסימון בג'אווה

בדוק את מאת אדוריקה. הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).

יש לך שאלה עבורנו? אנא הזכיר זאת בחלק ההערות של 'שרשור מחרוזות ב- JavaScript' ונחזור אליך.