Last Updated : Aug 19, 2023
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.
<!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.
- 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.
- 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.
The function enables the generation of numerous webpage components, including headings, paragraphs, links, and full sections.