באשכול הקודם שפירסמתי בנושא אלמנטים ניתנים לגרירה, מקסים העיר לי על השימוש ב- document.write והציע לי להשתמש ב- innerHTML או craeteElement.

בכל מקרה הלכתי על שניהם

אני לא מכניס את כל התוכן ב- innerHTML אחד, כי אז הכל יהיה בשורה אחת וזה לא יהיה נוח, ובגלל שלא חייבים להוסיף ; ב- JS, אני לא יכול לרדת שורה כי אז תהיה שגיאה..

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

הנה קטע קוד רלוונטי:

קוד:

var window = document.createElement("div");
window.id = this.windowId;
window.className = 'window';
document.body.appendChild(window);
	window.innerHTML += "<div class='window_top' id='"+this.windowTopId+"'>"+windowTitle;
		//coming soon...
		//<img src='images/top_left.gif' align='left'>
		//<img src='images/top_center.gif' class='topCenterImage'>
		//<<div class='top_buttons'>
			//<img class='minimizeButton' src='images/minimize.gif'>
			//<img class='closeButton' src='images/close.gif'>
	
			//<img src='images/top_right.gif'>
		//</div>
	window.innerHTML += "</div>";
	window.innerHTML += "<div class='windowMiddle'>";

		window.innerHTML += "<div class='windowContent'>";
			//Starting window content...
			window.innerHTML += "Testing..Testing..123";
			//End of window content...
		window.innerHTML += "</div>";
	window.innerHTML += "</div>";
	window.innerHTML += "<div class='window_bottom'>";
		//<img class="resizeImage" src="images/bottom_right.gif">
	window.innerHTML += "</div>";

alert(window.innerHTML);

ומה שאני מקבל ב- alert (הורדתי שורות לצורך הסדר):
פיירפוקס:

קוד:

<div class="window_top" id="window_top_1">test</div>
<div class="windowMiddle"></div>
<div class="windowContent"></div>
Testing..Testing..123
<div class="window_bottom"></div>

אקספלורר:

קוד:

<DIV class=window_top id=window_top_1>test</DIV>
<DIV></DIV>
<DIV class=windowMiddle></DIV>
<DIV class=windowContent></DIV>
Testing..Testing..123 
<DIV></DIV>
<DIV></DIV>
<DIV class=window_bottom></DIV>
<DIV></DIV>

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

1. למה אתה צריך ירידת שורה בinnerHTML? זה הרי גם ככה לא משפיע במקרה שלך, חוץ מזה שעם מוזילה זה יכול לעשות בעיות אחרות, וגם כל כך הרבה innerHTML זה הרבה יותר איטי מאשר innerHTML בודד
2. אם אתה באמת צריך אז למה שלא תבריח את תו ירידת השורה ? סלש n
3. אקספלורר חכם מדי...לא יודע מה הסיבה מאחורי זה.

למה שלא פשוט תשמור את כל הטקסט למשתנה ואז תשתמש ב innerHTML אחד ? זה גם הרבה יותר יפה וגם IE לא יסגור לך את זה כי אתה סגרת את זה.

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

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

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

לא קראתי את כל ההודעה (ולמען האמת גם לא רבע ממנה), לכן אני לא עונה ישירות לבעיה, אבל אם הבעיה טרם נפתרה, תכתוב ואשתדל לקרוא ולהגיב. כרגע רק אעיר באופן כללי.

שירשור תוכן באמצעות innerHTML יעיל במיוחד בקטעי קוד ארוכים המשורשרים פעמים מועטות או פעם אחת בלבד.
לשרשור רב פעמי רצוי להשתמש אך ורק בשיטות של האובייקט document (create, append and other) 0.

הבעיה נפתרה.. אבל יש באשכול נפרד בעיה אחרת...

בכל מקרה, מצאתי עוד דרך בלי משתנה פה, תחת Break up a Code Line

קוד:

var str = "";
str.concat("string",
	"another string",
	"another string");

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

קוד:

var str = String.concat("string", "another string", "another string");