מדריך זה יתאר את השיטות לכתיבת קוד HTML באופן דינמי באמצעות JavaScript.
כיצד לכתוב קוד HTML באופן דינמי באמצעות JavaScript?
כדי לכתוב קוד HTML באמצעות JavaScript, השתמש בשיטות הבאות:
שיטה 1: כתוב קוד HTML באופן דינמי באמצעות שיטת document.createElement()
JavaScript של ' document.createElement() שיטת ' עם ' textContent 'מאפיין משמש לכתיבת קוד HTML ב-JavaScript באופן דינמי. באמצעות שיטת createElement() ניתן ליצור אלמנט HTML מסוים, והמאפיין textContent משמש להגדרת תוכן הטקסט.
תחביר
השתמש בתחביר הנתון כדי ליצור אלמנט HTML ב-JavaScript:
מסמך. createElement ( 'תג שם' )
דוגמא
כאן, ראשית, ניצור פסקה בקובץ JavaScript באמצעות תג HTML
המועבר ב-' createElement() ' שיטה:
const טֶקסט = מסמך. createElement ( 'פ' ) ;השתמש במאפיין textContent כדי להגדיר את הטקסט בפסקה:
טֶקסט. textContent = 'ברוכים הבאים ל-Linuxhint' ;
לבסוף, הדפס את הטקסט בדף האינטרנט באמצעות ' document.write() ' שיטה:
מסמך. לִכתוֹב ( טֶקסט. textContent ) ;כאן, אתה יכול לראות בפלט שאנחנו כותבים בהצלחה את הטקסט בדף האינטרנט באמצעות JavaScript:
שיטה 2: כתוב קוד HTML באופן דינמי באמצעות innerHTML Property
כדי לכתוב קוד HTML באופן דינמי, השתמש ב-JavaScript ' innerHTML ' תכונה. זוהי הגישה הפשוטה ביותר לשנות את התוכן של רכיב HTML. זה תומך בכל הדפדפנים.
תחביר
עקוב אחר התחביר הנתון כדי להשתמש במאפיין innerHTML:
innerHTML = 'טֶקסט'דוגמא
בקובץ HTML, ראשית, צור כפתור שיקרא לפונקציה המוגדרת ' כּוֹתֶרֶת() ' ב-JavaScript באירוע הקליק:
< כפתור בלחיצה = 'כּוֹתֶרֶת()' > לחץ כאן לַחְצָן >צור פסקה באמצעות תג
שבה הטקסט יוצג מתוך ה-JavaScript והקצה לו מזהה:
< p id = 'כּוֹתֶרֶת' > ע >הגדר פונקציה ' כּוֹתֶרֶת() ' בקובץ JavaScript. קבל את ההפניה של רכיב ה-HTML באמצעות המזהה שהוקצה לו בעזרת ' getElementById() שיטת ' וליישם ' innerHTML 'נכס עליו:
כותרת פונקציה ( ) {מסמך. getElementById ( 'כּוֹתֶרֶת' ) . innerHTML = '
ברוכים הבאים ל-Linuxhint
' ;}
תְפוּקָה
ריכזנו את כל המידע החיוני הקשור לכתיבת קוד HTML באופן דינמי באמצעות JavaScript.
סיכום
כדי לכתוב קוד HTML באופן דינמי ב-JavaScript, השתמש ב-' document.createElement() שיטת ' עם ' textContent 'נכס או ה' innerHTML ' תכונה. בשיטה הראשונה, אתה לא צריך שום קוד HTML, ואילו במאפיין innerHTML, אתה צריך לגשת לאלמנט HTML ולבצע עליו פעולה. במדריך זה, תיארנו את השיטות לכתיבת קוד HTML באמצעות JavaScript באופן דינמי.