משהו מאוד מוזר עם innerHTML

[שששתייםשלוששבעאחדחמש]

משהו ../images/Emo31.gifמאוד../images/Emo31.gif מוזר עם innerHTML

כתבתי תוכנית ניסיון קצרה (מצורפת להודעה) כאשר לחצתי על הכפתור make div התפלאתי שלא רואים מסגרת מסביב לנתונים. ע"מ לבדוק מה קורה, הוספתי את הכפתור השני, שמראה את ה InnerHTML של ה DIV. כמעט נפלתי מהכיסא !

1. אני רואה שהוא הוסיף עוד דברים, כמו TBODY, אבל ניחא, אני מניח שהוא פשוט מוסיף תגיות שלא כתבתי בעצמי והוא צריך. 2. כאשר אני מתסכל בפלט של הכפתור השני (ניתן לראות אותו פה או פשוט ללחוץ על הכפתור השני במסך

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

 

[calm]

שני דברים

קודם כל, תעשה לעצמך טובה ופתח הרגלי עבודה נכונים. במקום mainId.innerHTML כתוב document.getElementById("mainId").innerHTML הסיבה לתגים שמופיעים היא שיש כללים מסויימים שעל פי הם עובד ה dom (Document Object Model). התגים האלה אינם נחוצים להצגת הקוד בדרך כלל אבל הדפדפן מוסיף אותם בתהליך בניית הקוד בעזרת שיטות כמו innerHTML , createElement וכו...

 

[שששתייםשלוששבעאחדחמש]

תודה לך, אבל היכן הבעיה ?

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

 

[calm]

getElementById

יוצר הפנייה לאובייקט המסויים במסמך. על מנת לעשות מניפולציות על כל תג במסמך, עליך ליצור הפנייה אליו. איך בדיוק אתה יוצר הפנייה לאלמנט במסמך על ידי שימוש בטקסט? התשובה היא internet explorer. נסה לעשות את זה בדפדפן אחר והוא לא יבין מה אתה רוצה מהחיים שלו. ב explorer הדבר נעשה ככל הנראה מכיוון שהוא תומך בשיטה document.all אשר יוצרת collection של כל האלמנטים במסמך ומייחסת את הטקסט שכתבת לזה שה id שלו מתאים. זו לא שיטה תיקנית ולכן כדאי לוותר עלייה. בעבר לכל דפדפן היתה שיטה משלו לפנות לאובייקטים, למשל netscape עשה את זה בעזרת document.layer ו explorer בעזרת document.all. כיום ישנו תקן אשר עושה שימוש ב getElementById על מנת לגשת לאלמנט במסמך בעזרת ה id שלו. אתה יכול גם לזהות האם הדפדפן הוא מודרני או לא בעזרת הבדיקה

if(document.GetElementById)​

 

[שששתייםשלוששבעאחדחמש]

תודה על ההסבר המפורט, ../images/Emo45.gifאבל! ../images/Emo45.gif

תודה על ההסבר, בהחלט השכלתי !

אבל מה לגבי הבעיה שלי ?

מדוע ה לא עובד כמו שצריך ? למה הטבהל לא נוצרת כפי שכתבתי בקוד, אלא בצורה מעוותת ? (ואני לא מתכוון לכך שמתווסף TBODY, אלא לכך שהוא זורק את כל המידע אל מחוץ לטבלה ! (ניתן לראות זאת כאשר לוחצים על הכפתור השני).

 

[calm]

תעשה ככה

mainId.innerHTML += "<table cellpadding=0 cellspacing=0 border=3><tr>" +"<td>info1</td>" +"<td>info2</td>" +"</tr></table>";​

 

[שששתייםשלוששבעאחדחמש]

תודה רבה ../images/Emo70.gif, עובד, אבל למה ../images/Emo35.gif../images/Emo35.gif

מדוע קודם זה לא עבד ?

 

[ילד כחול]

הוספת HTML באמצעות innerHTML

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

var str = "<table border=\"3\">" str += "<tr><td>text</td></tr>" str += "</table"> document.getElementById("oDiv").innerHTML += str;​

 

[זאינאל]

זה מיותר

מכיוון ש-innerHTML היא הרחבה לא תקנית של IE, אין שום סיכוי שדפדפנים אחרים יתמכו בה, ולכן ההתעקשות על הגישה לאלמנטים בעזרת ה-DOM (getElementById( מיותרת- הוא יכול אפילו להשתמש ב-document.all אם הוא רוצה. או שכותבים קוד תקין או שלא - קוד חצי תקין זה סתם טפשי : זה לא יעבוד בדפדפן התואם לתקן וזה לא משנה לדפדפן שלא.

 

[khaydarin]

מתי ביקרת פעם אחרונה ב-W3C?

innerHTML כבר מזמן בתקן.

 

[calm]

אתה טועה!!!

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

 

[xyxyxy]

innerHTML כבר מזמן בתקן

ויש לו הרבה מאד יתרונות שאין ל append ודומיו.

 

[זאינאל]

אשמח אם תפנו אותי למסמך התקן

שבו מופיע innerHTML, כי אני מבקר הרבה ב-w3.org ואף פעם לא ראיתי את זה בשום תקן. חיפוש מהיר העלה רק סיקור של IE5 שבה ה-API המכיל את innerHTML כונה "עלוב" (כך במקור).

 

[זאינאל]

נ.ב.

מכיוון ש-innerHTML לא נתמך ב-Netscape 6 )וגם לא ב- 7) וכמובן גם לא באופרה בגירסה 7 הנוכחית, אני חייב להסיק שאין לכם מושג על מה שאתם מדברים.

 

[khaydarin]

מסיק זה משהו שקשור לזיתים, לא?

זה יהיה נחמד אם רק לרגע תפסיק לחשוב שהפורום הזה זה תחרות למי יש זי* יותר ארוך... אני אישית משתמש ב-XMLHTTP ו-innerHTML באקספלורר 5+, נטסקייפ 6+, אופרה ומוזילה (הגרסאות האחרונות).

 

[ילד כחול]

הניסית לממש זאת בדפדפנים שהזכרת?

innerHTML עובד באופרה גירסה 7 , נטסקייפ גירסה 6+, מוזילה 1+, IE 5+ וכל דפדפן המבוסס עליהם. אמנם innerHTML נחשב כ-non-standard JScript and JavaScript objects אך בהחלט שווה להשתמש בו ולפי דעתי הוא עושה את דרכו לתקן

 

[xyxyxy]

ועכשיו.. לסיבה שזה קורה..

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

mainId.innerHTML += "<table cellpadding=0 cellspacing=0 border=3><tr>";​

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

mainId.innerHTML += "<table cellpadding=0 cellspacing=0 border=3><tbody><tr></tr></tbody></table>";​

לאחר מכן.. אחרי שכבר ה "טבלה" הזאת נוצרה.. היא ריקה לגמרי ואז אתה מכניס לו את הדבר הזה..

mainId.innerHTML += "<td>info1</td>"; mainId.innerHTML += "<td>info2</td>"; mainId.innerHTML += "</tr></table>";​

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

 

[שששתייםשלוששבעאחדחמש]

../images/Emo186.gif../images/Emo186.gif המממ... ../images/Emo186.gif../images/Emo186.gif

תודה רבה על ההסבר המפורט והמצויין ! הבנתי הכל, פרט להתייחסות ל appendChild. What is it ?

 

[khaydarin]

עוד שיטה להוסיף אלמנטים לדף

לדוגמה, אם יש לך DIV ואתה רוצה להוסיף לתוכו עוד SPAN.

var oSPAN = document.createElement("SPAN"); oDIV.appendChild(oSPAN);​

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

 

[khaydarin]

עוד קצת על innerHTML

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