very strange innerHTML behaviour

coder24

04-28-2006, 12:13 AM

Hello, I have programmed the following:

<html>
<body>
<head>
<script type="text/javascript">
function expandTaskMenu()
{ var x=document.getElementById('taskMenu');
x.innerHTML = "<table border=1 cellpadding=0 cellspacing=0 width=85%>";
x.innerHTML += "<tr><td>align=center width=100%><b><a href='javascript:collapseTaskMenu()' style='text-decoration: none'>Collapse</a></b></td></tr>";
x.innerHTML += "<tr><td>Sample 1</td></tr><tr><td>Sample 2</td></tr></table>";
}

function collapseTaskMenu()
{ var x=document.getElementById('taskMenu');
x.innerHTML = "<table border=0 cellpadding=0 cellspacing=0 width=85%>";
x.innerHTML += "<tr><td align=center width=100%><b><a href='javascript:expandTaskMenu()' style='text-decoration: none'>Expand</a></b></td></tr></table>";
}

</script>
</head>

<table border=1>
<tr><td id="taskMenu">
<table border="0" cellpadding="0" cellspacing="0" width="85%">
<tr>
<td align="center"width="100%">
<b><a href="javascript:expandTaskMenu()">Original</a></b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

When in Mozilla, with each subsequent click, the text moves down the page.
In IE, the text does not move but the "submenu" items print sideways instead
of down. I have no idea why either of these things happen. As I do not do much Javascript programming, any help would be very much appreciated.
Thank-you.

BaldEagle

04-28-2006, 04:14 AM

I am not certain this is causing you a problem but perhaps it is confusing the browsers.

x.innerHTML = "<table border=1 cellpadding=0 cellspacing=0 width=85%>";

In the above statement since you are not delimiting the attribute values you wind up with .....width=85%>. Maybe the browser thinks some server side stuff is supposed to be happening. Try rearranging your statements such that the % is not at the end of the line next to the >. Just a wild guess, could be of no importance.

BaldEagle

Kravvitz

04-28-2006, 05:08 AM

innerHTML is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp)

Use DOM1+ methods.
JavaScript tutorial - W3C DOM introduction (http://www.howtocreate.co.uk/tutorials/javascript/domintroduction)
http://www.quirksmode.org/dom/
http://www.quirksmode.org/js/dom.html
http://www.brainjar.com/
http://developer.apple.com/internet/webcontent/dom2i.html
http://www.mozilla.org/docs/dom/domref/dom_doc_ref.html
http://www.mozilla.org/docs/dom/domref/
http://www.w3schools.com/htmldom/dom_obj_document.asp
http://www.sitepoint.com/article/rough-guide-dom
http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
http://digital-web.com/articles/forms_usability_and_the_w3c_dom/
http://www.w3.org/DOM/