How to get the entire HTML document as a string in JavaScript ?

Given an HTML document, the task is to get the entire document as a string using JavaScript. Here few methods are discussed:

getElementsByTagName() Method
This method returns a set of all elements in the document with the defined tag name, as a NodeList object.
This object represents a collection of nodes, Which are accessed by index numbers. The index starts at 0.
Syntax:
```
document.getElementsByTagName(tagname)
```
Parameters:
- tagname: This parameter is required. It specifies the tagname of the elements to get.
HTML DOM innerHTML Property
This property set/return the HTML content (inner HTML) of an element.
Syntax:
- Return the innerHTML property:
```
HTMLElementObject.innerHTML
```
- Set the innerHTML property:
```
HTMLElementObject.innerHTML = text
```
Parameters:
- text: It specifies the HTML content of an element.
Return Value:
It returns a string, representing the HTML content of an element.

Example 1: This example gets the whole document as string using document.documentElement.innerHTML.

<!DOCTYPE html>   
<html> 
  
<head> 
    <title> 
        JavaScript | Get the entire document HTML as a string. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksforGeeks   
        </h1> 
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun(); "> 
        click here 
    </button> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        up.innerHTML = 'Click on the button to convert whole document to string'; 
  
        function GFG_Fun() { 
            var string = document.documentElement.innerHTML; 
            alert(string); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

Example 2: This example gets the whole document by first selecting the elements with tagname ‘HTML’ and selecting the first element by indexing using document.getElementsByTagName(‘html’)[0].innerHTML.

<!DOCTYPE html>   
<html> 
  
<head> 
    <title> 
        JavaScript | Get the entire document HTML as a string. 
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksforGeeks   
        </h1> 
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun(); "> 
        click here 
    </button> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        up.innerHTML = 'Click on the button to convert whole document to string'; 
  
        function GFG_Fun() { 
            var string = document.getElementsByTagName('html')[0].innerHTML; 
            alert(string); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:
After clicking the button:

Supported browsers:

Google Chrome
Mozila Firefox
Internet Explorer
Safari
Opera

My Personal Notes

Recommended Posts: