269

Using $('html').html() I can get the HTML within the <html> tag (<head>, <body>, etc.). But how can I get the actual HTML of the <html> tag (with attributes)?

Alternatively, is it possible to get the entire HTML of the page (including doctype, <html>, etc.) with jQuery (or plain old JavaScript)?

6 Answers 6

513

The simplest way to get the html element natively is:

document.documentElement

Here's the reference: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentElement.

UPDATE: To then grab the html element as a string you would do:

document.documentElement.outerHTML
Sign up to request clarification or add additional context in comments.

3 Comments

See also this question for more info on documentElement browser compatibility: stackoverflow.com/q/11391827/177710.
How often are you getting ref to the html element!? I don't think performance should be a concern, generally. Anyway, this is actually the better answer, but it came in WAY after the award.
nice, I implemented a brightness slider using this: <input type="range" min="0.50" max="1.0" value="0.95" step="0.01" onchange= "document.documentElement.style.filter= 'brightness('+this.value+')'">
56

This is how to get the html DOM element purely with JS:

var htmlElement = document.getElementsByTagName("html")[0];

or

var htmlElement = document.querySelector("html");

And if you want to use jQuery to get attributes from it...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);

1 Comment

Your answer would be considerably better if you could explain why this answered the question. Also, please highlight code and click the {} button or press ctrl + k to mark it up as code.
29

In addition to some of the other answers, you could also access the HTML element via:

var htmlEl = document.body.parentNode;

Then you could get the inner HTML content:

var inner = htmlEl.innerHTML;

Doing so this way seems to be marginally faster. If you are just obtaining the HTML element, however, document.body.parentNode seems to be quite a bit faster.

After you have the HTML element, you can mess with the attributes with the getAttribute and setAttribute methods.

For the DOCTYPE, you could use document.doctype, which was elaborated upon in this question.

2 Comments

Just as a note: This will fail if the body is not yet available on the document.
In which case, document.head.parentNode will still work if there's a head element.
23

In jQuery:

var html_string = $('html').outerHTML()

In plain Javascript:

var html_string = document.documentElement.outerHTML

Comments

4

if you want to get an attribute of an HTML element with jQuery you can use .attr();

so $('html').attr('someAttribute'); will give you the value of someAttribute of the element html

http://api.jquery.com/attr/

Additionally:

there is a jQuery plugin here: http://plugins.jquery.com/project/getAttributes

that allows you to get all attributes from an HTML element

1 Comment

The getAttributes() project is a bit old now (Feb 2009).
4

I found other alternative simple way using plain javascript:

const htmlElement = document.querySelector(':root')
console.log(htmlElement)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.