At first, document.write() was the popular method for injecting content into a web page. It was quick, simple, and helpful for beginner developers. However, as websites got more advanced, the way we build them has also changed. Now, these days, using document.write() is seen as a bad idea because of some very good reasons. In this blog, you will learn all the reasons why document.write() is considered a bad practice in JavaScript.
Table of Contents:
What is document.write()?
In simple words, document.write() is used to write a string of text directly to the web page.
Syntax:
document.write("<h1>Hello, From Intellipaat!</h1>");
Now, when the browser reads this line of code, it injects the HTML content into the document at the time when the code is being parsed.
Real-World Example of the Problem
For a long time, ad companies used document.write() to add ads to the websites. But this makes pages load slowly, show blank spaces while waiting for the ad, or even cause the website to crash on slower devices. These days, most ad companies use better and safer methods, like iframes or special JavaScript tools, to show ads without causing these problems.
Why is document.write() a Bad Practice Today?
Modern websites need to be fast, secure, and user-friendly. But document.write() works against all these goals. Let’s discuss each one of them in detail:
1. It blocks page rendering
When the browser encounters the document.write(), it stops everything like parsing HTML, downloading stylesheets, and executing JavaScript. This means it makes your site slower, especially on mobile devices or where devices with slower internet speeds.
2. Not good to use with Async Scripts
Today, most of the code written in JavaScript is loaded asynchronously to avoid page blocking. The document.write() forces the browser to wait, which defeats the purpose of these performance boosting techniques.
3. It Breaks Your Page After Load
Here is one big reason – why not to use a document.write(). If you call document.write() after the page has loaded by using window.onload() function, it will erase the entire document and replace it with the new content.
4. It Opens the Door to Security Risks
If you’re using a document.write() to insert user-generated content. You are just open to a Cross-Site Scripting attack. A malicious person can inject a script and get all the data of your website users.
Modern Alternatives to document.write()
Using document.write() in your code is not a good choice, but there are better and safer ways to add content dynamically. Let’s discuss some of them:
1. Use innerHTML
innerHTML is a property that allows you to change the HTML content inside an element. You can use it to insert text, HTML tags, or both into a specific part of your webpage.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>innerHTML</title>
</head>
<body>
<div id="text"></div>
<script>
document.getElementById('text').innerHTML = '<h1>Hello From Intellipaat!</h1>'
</script>
</body>
</html>
Output:
Explanation: In this example, the <div> with the id “text” will now contain an <h1> heading that says “Hello From Intellipaat”.
2. Use DOM Methods
Instead of using the innerHTML for inserting the HTML content in the web page, you can also use DOM Methods that allow you to safely build and control elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM methods</title>
</head>
<body>
<script>
const h1 = document.createElement("h1");
h1.textContent = "Hello From Intellipaat!";
document.body.appendChild(h1);
</script>
</body>
</html>
Output:
Explanation: In this example h1 element is created with the text “Hello From Intellipaat!” using the DOM method and added to the end of the body.
Conclusion
While document.write() is a quick way to add content to a web page. But it is not used in projects now because it comes with various downsides like slowing down your site, causing unexpected behaviour of your website, and even creating security risks. Modern websites are built to be fast, interactive, and safe, and there are many better methods available to do the same, like innerHTML or using DOM Methods. So if you are the person who is using a document.write() in code, then it’s time to change.
Why is document.write() Considered a Bad Practice in JavaScript – FAQs
1. Why is document write not used in JavaScript?
Today, document.write() is not good to use in projects for adding dynamic content to a web page because it blocks page loading, slows down performance, and can erase your content if used after the page loads.
2. What does document.write() do in JavaScript?
document.write() is used to write text or HTML content directly into a web page while it’s loading. If you can use document.write() for printing content after page reloads, then it erases all the existing data.
3. Is document.write() deprecated?
No, it’s not officially deprecated, but it’s strongly discouraged and considered bad practice.
4. What is the purpose of a document in JavaScript?
The document object represents the entire webpage. It allows you to access and manipulate HTML elements using JavaScript.
5. What is the full form of DOM?
DOM stands for Document Object Model. It is a tree-like structure that is prepared by your browser for each and every website loaded in the browser, and it helps JavaScript to change and structure the content of a webpage.