IE <= 8 removes <form> tag when received from AJAX

Question

I'm making an AJAX POST call to get some HTML. I take that HTML and inject it into the DOM. Everything works fine and dandy in every browser except for IE <= 8. It seems like IE is parsing the incoming HTML since when I log it to console/alert it, tags are in capitals.

The line it's removing:

<form class="uniForm" enctype="multipart/form-data" action="/profile/editprofile/" method="post">

Very bizarre because the end tag is there but the start tag isn't. The call is a standard jQuery POST ($.post()).

UPDATE:

Ended up giving up and putting it into an embedded textarea and reinjecting into the DOM:

<!--[if lt IE 9]>
<textarea class="ieHackTextArea">
<!--[if lt IE 9]>
<![endif]-->

... somewhere else ...

if ($.browser.msie && parseFloat($.browser.version) < 9) {
    ui.panel.innerHTML = $(".ieHackTextArea").val(); // jQuery injection doesn't work
}

Answer 1

I ran into the exact same problem today and managed to fix it by inserting an empty <pre></pre> right before the <form>, which somehow stops IE8 (haven't tested in other versions) from removing the <form>.

Answer 2

You can try to wrap all the form into a <div> to see if that works better.

I experienced the same issue with an <input> object and that was my solution to make sure it will work fine in IE8.