Why is my (incorrect) DOM structure auto-corrected after JQuery DOM manipulation?

问题

I have been searching the web for hours for this but I couldn't find an explanation or solution. So let's see if anyone can provide me with one here...

The problem I am having is that I have some "invalid" old HTML and we are currently revamping the website by injecting some other div's etc through JQuery. But after having changed the DOM some functionalities are not working anymore.

Let me give you an example. The old HTML is something like:

<table>
   <form method="POST">
   <tr>
      <td><input type="text" value="test" /></td>
   </tr>
   <tr>
      <td><input type="submit" value="SEND!" /></td>
   </tr>
   </form>
</table>

As you can see there is a <form> nested outside of a <tr> which is actually not valid. But it is interpreted correctly by the browser and it's working. BUT if I manipulate the DOM through JQuery the browser (Firefox in my case) notices it's wrong and the button is not working anymore. Checking my Firebug would give something like:

<table>
   <form method="POST"></form>
   <tr>
      <td>...

So obviously the submit button is not working anymore since it has "automatically" closed the <form> tag and the submit is not embedded anymore.

Can anyone shine some light on this issue? Why is this happening and what can I do to prevent this from happening (apart from changing the original HTML).

Thanks a lot !!

EDIT:

To avoid getting just the answer of "invalid markup" let me show you a second example.

<input type="text" id="something" value="" />

Javascript function that is loading on onLoad:

function setRequired() {
   document.getElementById('something').setAttribute('aria-required', 'true');
}

After the onload I can check this in Firebug and it works as expected:

<input type="text" id="something" value="" aria-required="true" />

But if I add the DOM manipulation after that it ends up in:

<inputaria-required="true" type="text" value="" id="something"></inputaria-required="true">

EDIT2:

As for the DOM modification, I am just wrapping the entire body of the page inside a structure of <div> tags. So something like (simplified):

$('body').wrapInner('<div class="container">');

To see this issue in action check this page (make sure you view it in Firefox because it works in IE).

回答1:

The code you've added later is quite a mess. I'd say it requires a very precise timing to work properly:

// Bind a page load event handler
$(document).ready(function() {
    LoadStyle();
});

// Manipulate page with raw HTML 1/2 seconds after page load
function LoadStyle() {
    setTimeout(function () {
    var outerbody = "<div>";
    var outerbodyEnd = "<\/div>";
    var frameHtml = $('body').html();
        var frameHtml = $('body').html();
        document.body.innerHTML = outerbody + frameHtml + outerbodyEnd;
    }, 500);
}

// Override previous onload handlers
window.onload = setRequired;

// Manipulate page with DOM methods right after page load
function setRequired() {
    var field;
    field = document.getElementsByName('required_one')[0];
    setAttrNS(field, "aria-required", "true");
}

Whatever, if you increment the setTimeout() delay to 5000 milliseconds, you'll see the invalid node is generated by LoadStyle(). Upon further investigation, I've composed this shorter snippet that still exhibits the issue (no jQuery involved):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test wrapping the content</title>
        <script type="text/javascript" language="javascript">
            window.onload = function(){
                var field = document.getElementsByName('required_one')[0];
                field.setAttributeNS("http://www.w3.org/2005/07/aaa", "aria-required", true);
                alert(document.getElementsByTagName("body")[0].innerHTML);
            };
        </script>
    </head>
    <body>
        <input type="text" name="required_one" value="This should show">
    </body>
</html>

The invalid HTML is generated by .innerHTML. Neither Firebug's HTML panel nor the alert() display a namespaced attribute. Sadly, I'm not familiar with namespaces so I can't tell you what's wrong: your code, Firebug or Firefox.