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.
- 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:
- Return the innerHTML property:
HTMLElementObject.innerHTML
- Set the innerHTML property:
HTMLElementObject.innerHTML = text
- text: It specifies the HTML content of an element.
Example 1: This example gets the whole document as string using document.documentElement.innerHTML.
html
<!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.
html
<!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
- Mozilla Firefox
- Internet Explorer
- Safari
- Opera
.png)
.png)