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 use JavaScript to replace the content of a document with JavaScript?
In this tutorial, we will learn how we can use JavaScript to replace the content of a HTML document. In JavaScript, we can change the content of HTML document with a combination of following methods −
open − The open method is used to open a new document which takes two arguments as text/html and replace, where first argument will define the type of new document to be formed and the later one will replace all the adds history on the previous page and help to open new document with ease.
document.open("text/html", "replace");
write − After creating the new document using the open() method, you need to use the write() method, which takes the content of the new document and you can pass the content of the new document associated inside the HTML tags, as shown below −
document.write("content of new document");
close − The close() method is used to make the new document to work, as shown in below syntax −
document.close();
Let us understand the practical implementation of all these methods together with the help of code example.
Algorithm
Step 1 − In the first step, we will define a button tag with the onclick event in the HTML document, which will later replace the document with new document once it is clicked.
Step 2 − In this step, we will define the call back function for the onclick event assigned to the button defined in the previous step.
Step 3 − In the last step, we will write the logic inside the call back function by using the above methods according to the syntax associated with each one to replace the content of the HTML document.
Example 1
The below example will replace the content of HTML document with only one line used inside the paragraph tag −
<!DOCTYPE html>
<html>
<body>
<p>Click and replace this content. </p>
<button onclick = "Display()">Replace</button>
<script>
function Display() {
document.open( "text/html", "replace");
document.write( " <p> This is the replaced content inside paragraph tag only. </p> ");
document.close();
}
</script>
</body>
</html>
In the above example, we have used only one line inside the write document associated with the paragraph tag, which will replace the whole content of the previous HTML document with that text inside the paragraph tag.
Let us see another example, where we will replace the content of existing HTML document with some complex text.
Algorithm − The algorithm of this example is almost similar to the previous one, you just need to aggregate all the new HTML content inside a string variable by which you want to replace the content of existing document.
Example 2
Below example will explain you, how you can replace the content of existing document with some complex HTML text using the above three methods −
<!DOCTYPE html>
<html>
<body>
<p>Click and replace this content.</p>
<button onclick = "Display()">Replace</button>
<script>
var newText = " <h4> This is the new document text </h4>" + " <p> This is the replaced text </p> ";
function Display() {
document.open("text/html", "replace");
document.write(newText);
document.close();
}
</script>
</body>
</html>
In the above example, we have used the same three methods to replace the content of HTML document, but this time we have stored the complex HTML content of the new HTML document in a string variable and then pass it to the write() method which later change the current document content with the content in the variable.
In this tutorial, we have seen how we can use the open(), write(), and the close() methods of JavaScript to change the content of the existing HTML document with some new content by practically implementing and understand their use with the help of three different code example in different situations.
2K+ Views
