How to get the <html> tag HTML with JavaScript / jQuery?
JavascriptJqueryJavascript Problem Overview
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)?
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
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);
Solution 3 - Javascript
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.
Solution 4 - Javascript
In jQuery:
var html_string = $('html').outerHTML()
In plain Javascript:
var html_string = document.documentElement.outerHTML
Solution 5 - Javascript
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
Additionally:
there is a jQuery plugin here: http://plugins.jquery.com/project/getAttributes
that allows you to get all attributes from an HTML element
Solution 6 - Javascript
I found other alternative simple way using plain javascript:
const htmlElement = document.querySelector(':root')
console.log(htmlElement)