קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

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

בעבודה עם ה-DOM, תשתמש ב-innerHTML וב-outerHTML בצורה שונה לגמרי. גלה כיצד להשתמש בשני המאפיינים הללו עם דוגמאות מעשיות.

מהו HTML פנימי?

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

שקול את דוגמת הקוד הזו:

<html>
<גוּף>
<עתְעוּדַת זֶהוּת="myP">אני פסקה.ע>


<תַסרִיט>
מסמך.getElementById("myP").innerHTML = "שלום עולם";
תַסרִיט>
גוּף>


html>

בדפדפן שלך תראה פסקה רגילה עם הטקסט החלופי, כך:

המאפיין innerHTML בוחר ומשנה את התוכן שלאלמנט בדוגמה זו.

מהו HTML חיצוני?

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

instagram viewer

עיין שוב בדוגמה הקודמת כדי לראות כיצד outerHTML שונה:

<html>
<גוּף>
<עתְעוּדַת זֶהוּת="myP">אני פסקה.ע>


<תַסרִיט>
מסמך.getElementById("myP").outerHTML = "
H1 זה החליף פסקה.
"
תַסרִיט>
גוּף>
html>

בדפדפן שלך, אתה אמור לראות משהו כזה:

בדוגמה זו, המאפיין outerHTML משנה את ה- ע אלמנט לתוך h1 אֵלֵמֶנט.

דע את ההבדל ומתי להשתמש במאפיינים אלה

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

אתה יכול להשתמש במאפיינים אלה כדי לקרוא ולכתוב תוכן HTML דרך ה-DOM. ה-DOM יהיה מושג נפוץ וחשוב לאורך תהליך הפיתוח של JavaScript.