How exactly does document.write function in JavaScript?

Question

How exactly does document.write function in JavaScript?

Currently, I am delving into JavaScript through W3Schools and have encountered a statement that says "If you execute document.write after the document has finished loading, the entire HTML page will be overwritten." From the examples provided, I have noticed this phenomenon occurring, but the explanation seems to be a bit unclear on what exactly is happening. I decided to experiment by rearranging parts of the script to see if it would alter the outcome, but to no avail.

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>

</body>
</html>

As I strive to grasp the concept better, I would appreciate any insights or brief summaries on how this process actually functions. Understanding this will enable me to proceed with my learning journey seamlessly.

javascript

Answer 1

Answer №1

If you have a background in programming, you likely understand the concept of streams. Streams are used to represent a continuous flow of data that can be read from or written to, typically without the ability for random access.

Just think of the document object as containing a hidden stream within it that holds the raw text response from a web server, such as HTML content. By using the document.open() method, you can access this stream.

During the loading process of a webpage, the document stream is already open and actively being read from or written to as the bytes arrive from the server to your browser. Once the document finishes loading (the HTML content specifically, not external resources like <img />), the stream is closed.

This is why using document.write while a page is loading, like

<script>document.write("foo");</script>

, directly inserts "foo" into the document stream. However, if you use document.write after the document has finished loading, it essentially reopens the stream from the beginning, overwriting anything previously written.

Answer 2

If you have a background in programming, you likely understand the concept of streams. Streams are used to represent a continuous flow of data that can be read from or written to, typically without the ability for random access.

Just think of the document object as containing a hidden stream within it that holds the raw text response from a web server, such as HTML content. By using the document.open() method, you can access this stream.

During the loading process of a webpage, the document stream is already open and actively being read from or written to as the bytes arrive from the server to your browser. Once the document finishes loading (the HTML content specifically, not external resources like <img />), the stream is closed.

This is why using document.write while a page is loading, like

<script>document.write("foo");</script>

, directly inserts "foo" into the document stream. However, if you use document.write after the document has finished loading, it essentially reopens the stream from the beginning, overwriting anything previously written.

Answer 3

Answer №2

The outcome varies depending on the browser you're using. In the past, your code would have replaced the entire page with text in all browsers. However, recent changes in some browsers mean that the document.write call may now be ignored instead of automatically calling document.open if it hasn't been called already.

It is still possible to use document.write after the page has loaded to replace the content in all browsers. But, this must be done correctly by first calling document.open.

Answer 4

The outcome varies depending on the browser you're using. In the past, your code would have replaced the entire page with text in all browsers. However, recent changes in some browsers mean that the document.write call may now be ignored instead of automatically calling document.open if it hasn't been called already.

It is still possible to use document.write after the page has loaded to replace the content in all browsers. But, this must be done correctly by first calling document.open.

How exactly does document.write function in JavaScript?

Answer №1

Answer №2

Similar questions

Send an object to query when using Router.push in Next.js

Difficulty encountered in altering button color when the password and confirm password fields are the same in a Vue.js project?

Sharing a boolean state between two pages using Material UI components

Tips for retrieving the ID value of the <li> element using JavaScript and AJAX

JavaScript framework that is easily customizable to include support for XmlHttpRequest.onprogress, even if it needs to be emulated

Ways to verify if all files have been loaded using Firebase.util pagination

Retrieve information from ngResource (angularjs) based on the chosen item

A compilation of web browsers and their compatible versions for the SVG engine

Prevent selection based on function in Angular

Transitioning from Three.js's CanvasRenderer to WebGLRenderer is a significant upgrade

Utilize the outcome of one variable to label another variable

"Deactivate the escaping feature in PHP when using heredoc syntax

Using Moment JS to Retrieve Month Names from the Current Year Starting from the Current Month and Beyond

Using Laravel and AJAX to save multiple selected filters for future use

Expand and collapse divs using jQuery when a JavaScript do_PostBack link is clicked

Tips for Drawing Lines and Preserving Them When a Condition is Met

Setting the rotation position in JQuery prior to initiating the animation

What is the method for utilizing a filter to extract the specific value from the elements within an array of double objects?

Best practice for resetting jquery datatables for proper functioning

Using Google Apps Script to input data into the next available row