Problem with IE's innerHTML and <form> tags??!?!

[Nebulus]

I'm having a really hard time with IE's innerHTML property and <form>
tags. If I use this code:

myDiv.innerHTML = "<form>This is a test</form>" in fireFox, the div tag
shows the content. However, if I do the same in IE, nothing happens.
For whatever reason, IE will not take that content.

Has anybody run into this, and what's a good solution? (Please, no "use
FireFox!" answers - we have users that use both equally).

Thanks for any help.

[Martin Honnen]

Nebulus wrote:

I'm having a really hard time with IE's innerHTML property and <form>
tags. If I use this code:

myDiv.innerHTML = "<form>This is a test</form>" in fireFox, the div tag
shows the content. However, if I do the same in IE, nothing happens.

Complete example

var div = document.createElement('div');
div.id = 'div1';
div.innerHTML = '<form>Kibology for all.</form>';
document.body.appendChild(div);
alert(div.outerHTML);

works fine for me with IE 6 on Windows XP, the div is rendered and the
outerHTML looks correct.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Nebulus]

Thanks for the help. I tested with some basic HTML/JS and was able to
put anything I wanted into the DIV tag.

However, I'm using a page that has a more complex layout and it also
uses some flash. When I try to add a form to a DIV in that page using
this exact code:

objDiv = document.getElementById('testDiv');
objDiv.innerHTML = '<form id="testForm" name="testForm"
method="GET">Test Form</form>';

then I get an unknown runtime error. Any ideas?

[Nebulus]

Um, nevermind.... I FINALLY figured it out. I had this code:

<form>
....inputs here...
<div id="testDiv">my test div here</div>
</form>

Obviously, you can't nest forms. Once I pulled the DIV out of the form,
it worked. DUH!