document.write In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of document.write in JavaScript, the essential JavaScript method document.write enables you to create material dynamically and insert it right into an HTML document.
Adding text, HTML, or JavaScript code to a webpage while it is loading or being used is its main use.
You can use document.write to dynamically build webpage components including headings, paragraphs, links, and even entire sections.
When the document.write command is used, the provided content is immediately written to the document at the script's placement point.
Although document.write is a basic and easy approach to create content, it has some restrictions.
The only time it can be used to write text is when the page first loads; any future calls to document.write will replace the material that has already been written.
Now move to the concept of document.write in javascript.
Step By Step Guide On document.write In Javascript :-
<!DOCTYPE html>
<html>
<head>
<title>Using document.write</title>
</head>
<body>
<script>
document.write("<h1>Welcome to My Website!</h1>");
document.write("<p>Here are some of our latest articles:</p>");
document.write("<ul>");
document.write("<li><a href='#'>Article 1</a></li>");
document.write("<li><a href='#'>Article 2</a></li>");
document.write("<li><a href='#'>Article 3</a></li>");
document.write("</ul>");
var currentDate = new Date();
var year = currentDate.getFullYear();
document.write("<p>© " + year + " MyWebsite. All rights reserved.</p>");
var username = prompt("Please enter your name:");
document.write("<p>Welcome, " + username + "!</p>");
var num1 = parseInt(prompt("Enter the first number:"));
var num2 = parseInt(prompt("Enter the second number:"));
var sum = num1 + num2;
document.write("<p>The sum of " + num1 + " and " + num2 + " is: " + sum + "</p>");
</script>
</body>
</html>
- We start our code with HTML.
- In the head section of the code, we define our webpage's title, which is set to "Using document.write."
- The title bar or tab of the browser will show this title.
- We now have a <script> tag in the body> section that contains our JavaScript code.
- document.write is used in this code to dynamically write material to our webpage.
- First, we display a big header that reads, "Welcome to My Website!" using document.write.
- For our users, this results in a visually appealing welcome greeting.
- We then produce a paragraph that briefly summarises a few of our most recent publications.
- This is followed by an unordered list (<ul>) with three list items (<li>).
- With a link indicated by the anchor tag <a>, each list item is an article.
- Next, we retrieve the current year using JavaScript and store it in the year variable.
- We utilize the document.write for display a copyright notice, containing the current year as well as the name of our website.
- We utilize prompt() to ask the user to input their name in order to give them a customized experience.
- The entered name is kept in the username variable, which we will use document.write for displaying a welcome message, addressing the user by their name.
- Additionally, we ask the consumer to enter numbers, which we then shop within the variables num1 and num2, respectively.
- These values are added to, and the end result is stored in the sum variable.
- The user will see the total of the supplied values when we use document.write as the final step in our process.
- The document.write commands automatically generate and insert the desired content when the webpage is loaded in a browser, giving the user an engaging and educational experience.
Conclusion :-
As a result, we were able to learn about document.write in javascript.
We also discovered that the essential JavaScript function document.write permits the creation of dynamic material and its insertion into an HTML document.
Adding text, HTML, or JavaScript code to a webpage while it is loading or running is a popular practise.
The function enables the generation of numerous webpage components, including headings, paragraphs, links, and full sections.
I hope this article on document.write in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
