Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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, 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.
2K+ Views
