Skip to content Skip to sidebar Skip to footer
Home / Dom / Dom Manipulation / Html / Jquery

Why Is My (incorrect) Dom Structure Auto-corrected After Jquery Dom Manipulation?

Post a Comment
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 t

Solution 1:

This is being done by the browser not jQuery. The only way you can stop it is to make your HTML code valid, ie. put the <table> inside the <form>

Solution 2:

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 loadfunctionLoadStyle() {
    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 handlerswindow.onload = setRequired;

// Manipulate page with DOM methods right after page loadfunctionsetRequired() {
    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 HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Test wrapping the content</title><scripttype="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><inputtype="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.

Solution 3:

That is an invalid markup. I suggest you either correct your markup or use Jquery .submit() for this if changing of markup is not possible.

Post a Comment for "Why Is My (incorrect) Dom Structure Auto-corrected After Jquery Dom Manipulation?"