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

Javascript Web Development Front End Technology

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, use the concept of innerHTML

The dynamic html can be written on the html document using the innerHTML property. The majority of the time, it is used in web pages to create dynamic html for things like comment forms, links, and registration forms.

The getElementsByTagName() Method

This function returns a NodeList object that contains a list of all the elements in the document that have the specified tag name. This object represents a group of nodes that can be reached via index numbers. The index begins at zero.

Syntax

Following is the syntax for getElementsByTagName()

document.getElementsByTagName(tagname)

HTML DOM innerHTML Property

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

Syntax

Return the innerHTML property

Following is the syntax for return innerHTML property

HTMLElementObject.innerHTML

Set the innerHTML property

Following is the syntax of set the innerHTML property

HTMLElementObject.innerHTML = text

Let’s dive into the following examples to understand more about conversion of whole document into string.

Example

In the following example the scripts get the entire document as string by using document.documentElement.innerHTML.

<!DOCTYPE html>
<html>
<body style="text-align:center;" id="body">
   <p id="tutorial" style="font-size: 15px; font-weight: bold;"> </p>
   <button onclick="tutorial1(); ">
      click here
   </button>
   <script>
      var up = document.getElementById('tutorial');
      up.innerHTML = 'Click To Convert Whole Document To String';
      function tutorial1() {
         var string = document.documentElement.innerHTML;
         alert(string);
      }
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of text along with a button displayed on the webpage. If the user clicks on the button, the event gets triggered, converts the whole document into a string, and displays it as an alert.

Example

Considering the following example, it gets the whole document by first selecting element with tagname “HTML” and selecting the first element by indexing 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;"> </p>
   <button onclick="tutorial1(); ">
      click here
   </button>
   <script>
      var up = document.getElementById('tutorial');
      up.innerHTML = 'Click on the button to convert whole document to string';
      function tutorial1() {
         var string = document.getElementsByTagName('html')[0].innerHTML;
         alert(string);
      }
   </script>
</body>
</html>

On running the above script, the web- browser displays the button along with some text on the webpage. When the user clicks the button, the event gets triggered, which converts the whole document into a string and displays it as an alert.