במאמר זה, אנו הולכים לדון כיצד ליצור אלמנט HTML באמצעות JavaScript. כאן נראה כמה דוגמאות להוספת האלמנט שנוצר במסמך.
יצירת אלמנטים באמצעות HTML אינה הדרך היחידה ליצור אלמנטים. עם זאת, לשם הפשטות, פעמים רבות אנו יוצרים אלמנטים ישירות במסמך ה-HTML אך באמצעות JavaScript, ניתן גם ליצור אלמנטים.
ה document.createElement() משמש ליצירת צומת רכיב HTML עם השם שצוין באופן דינמי באמצעות JavaScript. שיטה זו לוקחת את שם האלמנט כפרמטר ויוצרת את צומת האלמנט הזה.
לאחר יצירת אלמנט, נוכל להשתמש בשיטת appendChild() או בשיטת insertBefore() כדי להכניס את האלמנט שנוצר למסמך.
אנחנו יכולים להשתמש ב removeChild() שיטה להסיר צומת ויכולה גם להשתמש ב- replaceChild() שיטה להחלפת הצומת.
תחביר
document.createElement(nodename);
שיטה זו מקבלת ערך פרמטר בודד הנאמר באופן הבא:
מה אומר xd
שם צומת: זה הפרמטר החובה. פרמטר זה הוא מסוג מחרוזת. זה מציין את שם האלמנט שעלינו ליצור. שם האלמנט שצוין בפרמטר ייצור את האלמנט; אחרת, אם שם הרכיב שצוין לא יזוהה, ייווצר רכיב HTML לא ידוע.
ה document.createElement() יחזיר את האלמנט החדש שנוצר.
כעת, בואו נראה כמה דוגמאות לשימוש ב- document.createElement() שיטה. כאן נציג שתי דוגמאות. בדוגמה הראשונה, נשתמש ב- appendChild() שיטה להכנסת האלמנט למסמך, ובדוגמה השנייה, נשתמש ב- insertBefore() שיטה להכנסת אלמנט שנוצר על ידי document.createElement() שיטה.
דוגמה1
בדוגמה זו, אנו משתמשים ב- document.createElement() שיטה ליצירת רכיב לחצן חדש. נכניס את האלמנט שנוצר באמצעות ה- appendChild() שיטה. כאן, יש א כֵּיף() שיטה שתיצור רכיב לחצן חדש באמצעות ה createElement() שיטה. אנו מגדירים את הטקסט באמצעות ה innerHTML שיוצג בחלק העליון של הכפתור.
בוא נראה את הדוגמה שניתנה להלן.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button בדוק את זה עכשיו תְפוּקָה
לאחר ביצוע הקוד לעיל, הפלט יהיה -
לאחר לחיצה על הכפתור הנתון, הפלט יהיה -
דוגמה2
בדוגמה זו, אנו משתמשים ב- document.createElement() שיטה ליצירת רכיב לחצן חדש. כאן, אנו משתמשים ב- insertBefore() שיטה להכנסת האלמנט שנוצר. יש אלמנט div שיש לו אלמנט צאצא של פסקה. רכיב הכפתור החדש יוכנס לפני רכיב הבן של הפסקה של אלמנט div.
בוא נראה את הדוגמה שניתנה להלן.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button בדוק את זה עכשיו תְפוּקָה
לאחר ביצוע הקוד לעיל, הפלט יהיה -
לאחר לחיצה על הכפתור למעלה, הפלט יהיה -
צילום המסך שלמעלה מראה שרכיב הכפתור החדש הוכנס לפני אלמנט הפסקה. זה בגלל שהשתמשנו ב- insertBeofre() שיטה להכנסת האלמנט החדש שנוצר באמצעות ה- document.createElement() שיטה.