How do I get HTML corresponding to current DOM tree?

Question

jQuery("html").html() seems to retrieves most of it, except for the wrapping tag.

DOM is heavily modified, so original source is of not that much use.

• Is it reliable?
• Is it a good idea to just take jQuery's output and wrap ... around it? I can see at least some doctype problems here, and inclusion of scripts which shouldn't be rerun.
• Any better way?

EDIT: jQuery("").append(jQuery("html").clone()).html() almost works, except for doctype. Is there an easy way to get it?

EDIT 2: I need the doctype mostly to get proper quirk/almoststandards/standards mode. document.compatMode has half of it, is it enough?

Answer 1

Have you tried $(document).html()

Answer 2

http://brandonaaron.net/blog/2007/06/17/jquery-snippets-outerhtml/ outerHTML implementation for jquery.

Edit

Doing a quick search came in the document.doctype option, here is a full reference to it. Removed the old and now unnecessary text/code.

Answer 3

jQuery uses innerHTML to get the HTML. You're not going to get the exact DOM state using this attribute. For example the content of input values or the state of a select box will not stay the same unless you properly modify it before calling innerHTML.

What is this wrapping tag you're talking about? For most of it, innerHTML should work fine.

For example, I use this code for the state of select and input boxes.

// go through each input and replace
// it's defaultText so we can use innerHTML
$("#client_html input").each(function(){
    $(this)[0].defaultValue = $(this)[0].value;

});
// go through each <select> and replace
// it's defaultValue? so we can use innerHTML
$("#client_html select").each(function(){
    var options = $(this).attr("options");

    $.each(options, function() { 
        if(this.selected) {
            this.setAttribute("selected", true);
        } else {
            this.removeAttribute("selected");
        }
    });
});

I haven't found issues with state consistency of other elements, but there probably is.

Answer 4

You can use standard DOM commands:

To get the innerHTML of the HTML tag

document.body.parentNode.innerHTML

To get the Doctype information

document.body.parentNode.previousSibling;