Self-Closing Tag Issue with document.innerHTML in Javascript

I am writing a browser plug-in for Firefox(Greasemonkey), Opera and Chrome in Javascript for a website. The issue is, when I load the document.innerHTML into a variable,

<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
&nbsp;</td>
</form>

... the original code above of the website(which I am writing the plug-in for) is converted into

<form name="foo" action="foo.php" method="get">
<td id="td">text:
**<input name="k" type="text">**
&nbsp;</td>

... this one. As you can see, the self-closing <input /> tag is not closed anymore, and the </form> tag also disappeared. I have googled almost all the internet but non开发者_Python百科e of the solutions I read did not solve my problem.

The closing </form> tags show up for me in Firefox when getting .innerHTML.

I'd suggest that the missing tag is due to your markup which I'm pretty sure is invalid:

  <!-- A <form> wrapping a <td> ? -->
<form name="foo" action="foo.php" method="get">
    <td id="td">text:
        <input name="k" type="text" />
        &nbsp;
    </td>
</form>

The parent of a <td> element should be a <tr>, not a <form>.

Given this markup:

<table>
    <tr>
        <form name="foo" action="foo.php" method="get">
            <td id="td">text:
                <input name="k" type="text" />
                &nbsp;
            </td>
        </form>
    </tr>
</table>

...Firefox gives me this innerHTML for the <table>:

<tbody>
    <tr>
        <form name="foo" action="foo.php" method="get"></form>
            <td id="td">text:
                <input name="k" type="text">
                &nbsp;
            </td>

    </tr>
</tbody>

It attempts a correction of the invalid markup.

DEMO: http://jsfiddle.net/grM4c/

Well, taking a look on your code, you care creating a form with a unclosed TD in the middle.

<form name="foo" action="foo.php" method="get">
<td id="td"><span>text:<input name="k" type="text" /></span></td>
</form>

Try this way.