Get the whole document's html with JavaScript/JQuery

Question

I know it's already discussed here, but there were no solution to get the whole document (including doctype).

$(document).html(); returns null...

Answer 1

You can do

new XMLSerializer().serializeToString(document);

for all browsers newer than IE 9

Answer 2

This is a function which has support in IE6+, it does't use outerHTML for even more support, it adds the doctype and uses a few tricks to get the html tag and its attributes. In order to receive a string with the doctype, and doesn't use outerHTML so it supports every browser. It uses a few tricks to get the html tag. Add this code:

document.fullHTML = function () {
    var r = document.documentElement.innerHTML, t = document.documentElement.attributes, i = 0, l = '',
        d = '<!DOCTYPE ' + document.doctype.name + (document.doctype.publicId ? ' PUBLIC "' + document.doctype.publicId + '"' : '') + (!document.doctype.publicId && document.doctype.systemId ? ' SYSTEM' : '') + (document.doctype.systemId ? ' "' + document.doctype.systemId + '"' : '') + '>';
    for (; i < t.length; i += 1) l += ' ' + t[i].name + '="' + t[i].value + '"';
    return d+'\n<html' + l + '>' + r + '</html>';
}

Now, you can run this function:

console.log(document.fullHTML());

This will return the HTML and doctype.

I ran this on example.com, here are the results