Self-Closing Tag Issue with document.innerHTML in Javascript

Question

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 none of the solutions I read did not solve my problem.

As far as I know, there isn't a way to get the original page source in this way (or at least a way guaranteed to work). The browser will give you a HTML serialisation of a DOM Element's contents when you ask for innerHTML. Loading the page via an XMLHTTPRequest would work, though that's probably not what you're after. — Paul Grime
– Paul Grime, Commented Sep 13, 2011 at 22:42
Why is it an issue? How the browser chooses to represent the elements as HTML markup shouldn't really affect anything. The nature of an <input> element is that it doesn't have descendants. The lack of a /> doesn't change that. — user113716
– user113716, Commented Sep 13, 2011 at 22:42
The <input> tag does not have to be closed in HTML, and in fact in HTML self-closing tags are syntactically incorrect anyway. — Pointy
– Pointy, Commented Sep 13, 2011 at 22:46
Actually the issue is that because </form> disappears, when I type something in the input and press enter the form does not work properly. — Nail
– Nail, Commented Sep 13, 2011 at 22:47

user113716 · Accepted Answer · 2011-09-13 22:57:17Z

2

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/

edited Sep 13, 2011 at 22:57

answered Sep 13, 2011 at 22:51

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nail Over a year ago

I pasted the code partially in my first post and of course there is a <tr> above. But as I understand from your message there always must be a <tr> before putting a <td>, right? And also as I mentioned above I am writing a third-party plugin for the website and I am not the admin, so I cannot change the original code. I am trying to find a way in javascript to do this.

Nail Over a year ago

OK, take a look at this, jsfiddle.net/UQ4jj Both Opera and Firefox gives the same output. By the way, the HTML part is the very original code of the website(except for the table tags in the beggining and in the end, I kept them for the javascript part), unlike the code in my first post.

user113716 Over a year ago

@Nail: Yes, same issue. The markup is invalid. You can never rely on invalid HTML markup. If the site has <table><form><td>, then the site is coded improperly and needs to be fixed by the admin. Even if you somehow find a JavaScript solution that works with the current rendering, Firefox could change the way it renders invalid markup with its next release, causing your original fix to fail.

Nail Over a year ago

Thank you very much anyway, BTW I am trying to fix the issue by the ugly methods, which is changing the content of innerHTML with replace(). I am going to add the required </form> tag myself. Response for your edit: Yes you are right, but at the moment there is no other way to solve this issue since I cannot reach the admin, if Firefox changes the render it means that I will change my Javascript code too.

vtortola · Accepted Answer · 2011-09-13 22:54:11Z

0

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.

answered Sep 13, 2011 at 22:54

vtortola

36.1k33 gold badges169 silver badges270 bronze badges

3 Comments

nnnnnn Over a year ago

The <td> in the question's code does have a corresponding closing tag. It should be a child of a <tr> rather than a <form>, but it is closed.

Nail Over a year ago

Yes @nnnnnn is right, and also I am writing a third-party extension for the website which I am not the admin. Because of this I cannot change the html part, so it means I have to find a solution in Javascript.

vtortola Over a year ago

right @nnnnn, I saw something wrong but I fail writing the code.

Collectives™ on Stack Overflow

Self-Closing Tag Issue with document.innerHTML in Javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related