JavaScript document write() function writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
write(markup)
In general, rather than using document.write to add content to a page, use the various DOM methods.
Note: The write() method deletes all existing HTML when used on a loaded document.
For example, the document write function
A simple example code writes some text directly to the HTML output:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>Output:
Write some HTML elements directly to the HTML output:
document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");When document.write is used after the document has fully loaded, it will overwrite the entire document, replacing the existing content. This behavior is often unintended and can cause issues in the user experience.
document.write is a synchronous method that blocks the rendering of the page until the content is fully written. This can lead to performance issues, especially in modern, dynamic web applications.
While document.write is still part of the JavaScript standard, its use is generally discouraged in modern web development. Alternatives like DOM manipulation methods (createElement, appendChild, innerHTML), and frameworks (React, Vue, Angular) provide more robust, efficient, and maintainable ways to update the content of a webpage dynamically.
Do comment if you have any doubts or suggestions on this JS document topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version