Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the entire document HTML as a string in JavaScript?
One of the most useful features of JavaScript is the ability to get an entire document's HTML as a string. This can be used for many purposes, such as obtaining data from a website or creating dynamic content on your own website. In this article, we'll go over how to get the entire document HTML as a string in JavaScript.
To get the entire document HTML as a string, we use the innerHTML property combined with methods to access the document element.
The innerHTML property allows us to read or write HTML content dynamically. It's commonly used in web pages to create dynamic HTML for things like comment forms, links, and registration forms.
Method 1: Using document.documentElement.innerHTML
The most direct approach is to use document.documentElement.innerHTML, which returns the HTML content inside the <html> tag.
Syntax
document.documentElement.innerHTML
Example
In the following example, we get the entire document as a string using document.documentElement.innerHTML.
<!DOCTYPE html>
<html>
<body style="text-align:center;" id="body">
<p id="tutorial" style="font-size: 15px; font-weight: bold;">
Click To Convert Whole Document To String
</p>
<button onclick="tutorial1();">
Click Here
</button>
<script>
function tutorial1() {
var string = document.documentElement.innerHTML;
alert("Document HTML: " + string.substring(0, 100) + "...");
}
</script>
</body>
</html>
When the script executes, it displays text with a button on the webpage. Clicking the button triggers the event, converts the whole document into a string, and displays a preview in an alert.
Method 2: Using getElementsByTagName()
The getElementsByTagName() method returns a NodeList object containing all elements with the specified tag name. We can use this to select the HTML element and access its innerHTML.
Syntax
document.getElementsByTagName(tagname)
Example
In this example, we get the whole document by selecting the element with tagname "html" and accessing the first element using document.getElementsByTagName('html')[0].innerHTML.
<!DOCTYPE html>
<html>
<body style="text-align:center;" id="body">
<p id="tutorial" style="font-size: 15px; font-weight: bold;">
Click on the button to convert whole document to string
</p>
<button onclick="tutorial1();">
Click Here
</button>
<script>
function tutorial1() {
var string = document.getElementsByTagName('html')[0].innerHTML;
alert("Document HTML: " + string.substring(0, 100) + "...");
}
</script>
</body>
</html>
On running the script, the web browser displays the button with text on the webpage. When the user clicks the button, the event gets triggered, converts the whole document into a string, and displays a preview as an alert.
Comparison
| Method | Syntax | Performance |
|---|---|---|
documentElement.innerHTML |
More direct | Faster |
getElementsByTagName('html')[0].innerHTML |
More verbose | Slightly slower |
Key Points
- Both methods return the HTML content inside the
<html>tag - The DOCTYPE declaration is not included in the result
-
document.documentElement.innerHTMLis the preferred method - The returned string can be stored, modified, or transmitted as needed
Conclusion
Use document.documentElement.innerHTML as the standard way to get the entire document HTML as a string. This method is direct, efficient, and widely supported across all modern browsers.
2K+ Views
