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?

It might help if we knew what you were attempting to do with the HTML. — Topher Fangio, Jan 22 '10 at 19:56
See http://stackoverflow.com/questions/1526407/jquery-select-html-of-an-element-inclusive or http://stackoverflow.com/questions/1917020/how-to-get-html-string-of-a-child-tag-and-parent-tag-using-jquery or http://stackoverflow.com/questions/1917040/can-i-get-the-full-html-represenation-of-an-htmlelment-dom-object or (less jquery-specific) http://stackoverflow.com/questions/1763479/how-to-get-the-html-for-a-dom-element-in-javascript — Crescent Fresh, Jan 22 '10 at 20:01

score 2 · Answer 1 · edited Jun 13 '13 at 13:32

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.

// it's defaultValue so we can use innerHTML
$("#divContentInside input").each(function () {
    this.defaultValue = this.value;
});
// go through each select and replace
// it's selection so we can use innerHTML
$("#divContentInside select > option").each(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.

score 2 · Answer 2 · answered Jan 22 '10 at 20:24

2

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;

answered Jan 22 '10 at 20:24

Mic

24,812
9
57
70

Thanks, naive $('
').append($(document.body.parentNode.previousSibling) ).html() raises "Node cannot be inserted at the specified point in the hierarchy" exception, but I should be able to figure out the doctype from the node. – taw Jan 22 '10 at 20:28
You can read the properties of the object returned by document.body.parentNode.previousSibling, it doesn't have html – Mic Jan 22 '10 at 20:43

Francisco Aquino · Answer 3 · 2010-01-22T20:34:09.540

0

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.

edited Jan 22 '10 at 20:34

answered Jan 22 '10 at 20:14

Francisco Aquino

9,097
1
31
37

Requesting the source won't do much good, as DOM gets modified and it's the modified state I'm interested in. – taw Jan 22 '10 at 20:20

score -2 · Answer 4 · answered Jan 22 '10 at 19:57

-2

Have you tried $(document).html()

answered Jan 22 '10 at 19:57

Sonny Boy

7,848
18
76
104

How do I get HTML corresponding to current DOM tree?

4 Answers4

Linked